Javascript:不插入右索引行表

Question

我尝试在单击按钮的行下添加一定数量的行(取决于在文本框中输入的数字)。它在第一行上工作正常，但当我在第二行按钮上执行此操作时，它不起作用(它继续插入到第一行下)。

这是 fiddle : 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 = '------';
    }
});

Answer 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>