Question

I am using the html table. I want to insert a new row to that table dynamically like button click. I was tried like this,

var rows = $(this.element).find("tbody").find("tr");
prevElem = rows[index];
$("<tr><td>data</td><tr>").insertBefore(prevElem);

But, it doesn’t work. How to insert new row at the specified index?

Thanks in advance,

-Raja.

Answer 1

Have a look here:

$('#txtIndex').val($('#tblAddMe tbody tr').length);
$('#btnAdd').click(function() {
  var indx = $('#txtIndex').val() - 1;
  var newRow = $('<tr><td>New Row Added' + $('#tblAddMe tbody tr').length + '</td></tr>');
  newRow.insertBefore($('#tblAddMe tbody tr:nth(' + indx + ')'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblAddMe">
  <tbody>
    <tr>
      <td>Row 1</td>

    </tr>
    <tr>
      <td>Row 2</td>

    </tr>
  </tbody>
</table>
<input id="txtIndex" />
<button type="button" id="btnAdd">Add</button>

I have done a working example of inserting a row before an element.