Question

I created a table, on referring “http://stackoverflow.com/questions/9045940/dynamically-adding-table-row” , whenever i came into the last row in the table i need to add another row into the table at the bottom dynamically, here is the code i tried:

<table id="myTable" style="table-layout:auto">

   <tr>
   <td><input type="text" onblur="addRow('myTable')" /></td>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
  </tr>

</table>

and the javascript is as follows:

<script>
function addRow()
{
   //add a row to the rows collection and get a reference to the newly added row
   var newRow = document.all("myTable").insertRow();

   var oCell = newRow.insertCell();
   oCell.innerHTML = "<input type='text' onblur='addRow();'>";

   oCell = newRow.insertCell();
   oCell.innerHTML = "<input type='text' name='title'>";

   oCell = newRow.insertCell();
   oCell.innerHTML = "<input type='text' name='title'>";   
}

</script>

But, here a new row is added at the top of the table, what should i do?

Answer 1

change var newRow = document.all("myTable").insertRow();

to

var newRow = document.all("myTable").insertRow(-1);

Also, in your onblur event, why do you pass an argument to the addRow function when it doesn’t take any?