title: Dynamically adding a row in the table onblur the last row in the table using javascript
body: <p>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: </p>
  
  <pre><code>&lt;table id="myTable" style="table-layout:auto"&gt;
  
     &lt;tr&gt;
     &lt;td&gt;&lt;input type="text" onblur="addRow('myTable')" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>and the javascript is as follows:</p>
  
  <pre><code>&lt;script&gt;
  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 = "&lt;input type='text' onblur='addRow();'&gt;";
  
     oCell = newRow.insertCell();
     oCell.innerHTML = "&lt;input type='text' name='title'&gt;";
  
     oCell = newRow.insertCell();
     oCell.innerHTML = "&lt;input type='text' name='title'&gt;";   
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>But, here a new row is added at the top of the table, what should i do?</p>