1. 首頁
  2. 問答
  3. Javascript：不插入右側索引行表

Javascript：不插入右側索引行表

2016-09-28 74 views
0

我試圖在點擊按鈕的行下添加一定數量的行（取決於文本框中輸入的數字）。它在第一行工作正常，但在第二行按鈕時它不工作（它一直插在第一行下面）。Javascript：不插入右側索引行表

這裏的小提琴： https://jsfiddle.net/L4zffok1/

$('.add-rows').click(function(){ 

    var $bx_id; 
    var $num_rows; 
    var table = document.getElementById("myTable"); 
    $bx_id = this.id; 
    $num_rows = $('#num_boxcodes_'+$bx_id).val(); 

    for (i = 0; i < $num_rows; i++) { 
     var row = table.insertRow($bx_id); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     var cell4 = row.insertCell(3); 
     var cell5 = row.insertCell(4); 
     var cell6 = row.insertCell(5); 
     var cell7 = row.insertCell(6); 
     var cell8 = row.insertCell(7); 
     cell1.innerHTML = '------'; 
     cell2.innerHTML = '------'; 
     cell3.innerHTML = '------'; 
     cell4.innerHTML = '------'; 
     cell5.innerHTML = '------'; 
     cell6.innerHTML = '------'; 
     cell7.innerHTML = '------'; 
     cell8.innerHTML = '------'; 
    } 
});

來源

2016-09-28 Ronald

+0

因爲沒有與像「num_boxcodes _...'ID沒有 –

+0

一旦你插入的行，下面的任何現有行的ID將不再相關，因爲到你的小提琴不會在所有的工作在按下按鈕時插入... –

+0

問題是傳遞給'insertRow'的參數rownumber。一旦添加了更多行，最後一行將被下推，並根據表中的行數得到新的索引。然後，當您將新行的「r」作爲rownumber傳遞給它時，它們將插入到最後一行之前的行中。換句話說，您的腳本中存在嚴重的邏輯缺陷。 – adeneo

回答

1

.insertRow希望您在女巫通過索引把你的新行，而是你只能通過2或3（這是ID的，ID名稱不得以啓動號碼）。請嘗試計算新的位置。

$(document).ready(function() { 
 
    $('.add-rows').click(function() { 
 

 
    var $bx_id; 
 
    var $num_rows; 
 
    var table = document.getElementById("myTable"); 
 
    $bx_id = this.id; 
 
    $num_rows = $('#num_rows_' + $bx_id).val(); 
 
    var rowIndex = $(this).closest('tr').index() + 2; 
 
    var k = "00" + Math.floor(Math.random() * 100); 
 
    k = k.substr(k.length - 2); 
 

 
    for (i = 0; i < $num_rows; i++) { 
 
     var row = table.insertRow(rowIndex); 
 
     var cell1 = row.insertCell(0); 
 
     var cell2 = row.insertCell(1); 
 
     var cell3 = row.insertCell(2); 
 
     var cell4 = row.insertCell(3); 
 
     var cell5 = row.insertCell(4); 
 
     var cell6 = row.insertCell(5); 
 
     var cell7 = row.insertCell(6); 
 
     var cell8 = row.insertCell(7); 
 
     cell1.innerHTML = '----' + k; 
 
     cell2.innerHTML = '----' + k; 
 
     cell3.innerHTML = '----' + k; 
 
     cell4.innerHTML = '----' + k; 
 
     cell5.innerHTML = '----' + k; 
 
     cell6.innerHTML = '----' + k; 
 
     cell7.innerHTML = '----' + k; 
 
     cell8.innerHTML = '----' + k; 
 
    } 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-hover" id="myTable"> 
 
    <thead> 
 
    <tr class="success"> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
     <th>Column 3</th> 
 
     <th>Column 4</th> 
 
     <th>Column 5</th> 
 
     <th>Column 6</th> 
 
     <th>Column 7</th> 
 
     <th>Column 8</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Test</td> 
 
     <td>Test</td> 
 
     <td>Test</td> 
 
     <td>Test</td> 
 
     <td> 
 
     <input type="text" size="10" id="num_rows_2" /> 
 
     <button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button> 
 
     </td> 
 
     <td>Test</td> 
 
     <td>Test</td> 
 
     <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test2</td> 
 
     <td>Test2</td> 
 
     <td>Test2</td> 
 
     <td>Test2</td> 
 
     <td> 
 
     <input type="text" size="10" id="num_rows_3" /> 
 
     <button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button> 
 
     </td> 
 
     <td>Test2</td> 
 
     <td>Test2</td> 
 
     <td>Test2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-09-28 06:10:02 Justinas

0

既然你已經使用jQuery，爲什麼不使用它做創建基於最後一個新行？

$(document).ready(function() { 
$('.add-rows').click(function(){ 
    var $bx_id; 
    var $num_rows; 
    var $table = $("#myTable"); 
    $num_rows = $(this).parent().find('input').val(); 
    for(i = 0; i < $num_rows; i++){ 
     var $newRow = $('<tr>'); 
     $newRow.html('<td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td>'); 
     $table.append($newRow) 
    } 
});

}）

來源

2016-09-28 06:10:07

+0

要添加的子行數取決於父行的文本框的值。所以你的解決方案將無法工作。不管怎麼說，多謝拉。 :) – Ronald

+0

你是對的 - 我錯過了，編輯答案 - 現在這就是你想要的 –

1

我改變了輸入控件的ID是num_boxcodes_和功能添加行，現在它的工作：

$(document).ready(function() { 
 
\t $('.add-rows').click(function(){ 
 
\t \t var $bx_id; 
 
\t \t var $num_rows; 
 
\t \t var table = document.getElementById("myTable"); \t \t 
 
     \t $num_rows = $('#num_boxcodes_'+this.id).val(); 
 
     $bx_id = $(this).closest('tr').index() + 2; 
 

 
\t \t for (i = 0; i < $num_rows; i++) { 
 
\t \t \t var row = table.insertRow($bx_id); 
 
\t \t \t var cell1 = row.insertCell(0); 
 
\t \t \t var cell2 = row.insertCell(1); 
 
\t \t \t var cell3 = row.insertCell(2); 
 
\t \t \t var cell4 = row.insertCell(3); 
 
\t \t \t var cell5 = row.insertCell(4); 
 
\t \t \t var cell6 = row.insertCell(5); 
 
\t \t \t var cell7 = row.insertCell(6); 
 
\t \t \t var cell8 = row.insertCell(7); 
 
\t \t \t cell1.innerHTML = '------'; 
 
\t \t \t cell2.innerHTML = '------'; 
 
\t \t \t cell3.innerHTML = '------'; 
 
\t \t \t cell4.innerHTML = '------'; 
 
\t \t \t cell5.innerHTML = '------'; 
 
\t \t \t cell6.innerHTML = '------'; 
 
\t \t \t cell7.innerHTML = '------'; 
 
\t \t \t cell8.innerHTML = '------'; 
 
\t \t } 
 
\t }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-hover" id="myTable"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr class="success"> 
 
\t \t \t \t \t <th>Column 1</th> 
 
\t \t \t \t \t <th>Column 2</th> 
 
\t \t \t \t \t <th>Column 3</th> 
 
\t \t \t \t \t <th>Column 4</th> 
 
\t \t \t \t \t <th>Column 5</th> 
 
\t \t \t \t \t <th>Column 6</th> 
 
\t \t \t \t \t <th>Column 7</th> 
 
\t \t \t \t \t <th>Column 8</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" size="10" id="num_boxcodes_2" /> 
 
\t \t \t \t \t \t <button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t \t <td>Test</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" size="10" id="num_boxcodes_3" /> 
 
\t \t \t \t <button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t \t <td>Test2</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

來源

2016-09-28 06:19:55 mbadeveloper

+0

感謝你。有用！您的代碼與我的區別在於計算行索引。 – Ronald

0

我我敢打賭，這些答案都不會像你想要的那樣工作，即使你選擇了一個。請查看：https://jsfiddle.net/L4zffok1/4/

您將需要將事件委派給新元素，並關閉以前附加的任何事件。遞歸是最好的解決方案。

function retardedAddRow(){ 
    var table = document.getElementById('myTable'); 
    $('.add-rows').each(function(c, e){ 
    var t = $(e); 
    t.off('click'); 
    t.click(function(){ 
     var val = t.prev().val(), row, cell; 
     for(var n=0; n<val; n++){ 
     row = table.insertRow(c+2+n); 
     for(var i=0,l=8; i<l; i++){ 
      cell = row.insertCell(i); 
      cell.innerHTML = '------'; // bad technique 
      if(i === 4){ 
      cell.innerHTML = "<input type='text' size='10' /><button type='button' class='btn btn-success btn-inline add-rows'>OK</button>"; 
      } 
     } 
     } 
     retardedAddRow(); 
    }); 
    }); 
} 
$(function(){ 
    retardedAddRow(); 
});

來源

2016-09-28 07:46:42 PHPglue

+0

謝謝。但其中一個答案在我所需要的情況下工作得很好。 :) – Ronald

相關問題

 相關問題