Ronald Ronald - 2 months ago 8
jQuery Question

Javascript: Doesn't insert on right index row table

I tried adding a certain number of rows (depending on the number inputted on the textbox) under the row of which button was clicked. It seems working fine on the first row but it's not working when I do it on the second button (it keeps on inserting on under the first row).

Here's the 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

.insertRow expects that you pass index at witch put your new rows, but instead you only pass 2 or 3 (that's the ID's, ID name should not start with number). Try calculating new position instead.

$(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>