title: Dynamically Adding Table Rows Using jQuery
body: <p>I have a footer row which is used to add new rows to an HTML table. For some reason when I add a new row it deletes the footer row. I want the new row to be added before the footer. </p>
  
  <p>Example: </p>
  
  <pre><code>Row 1 
  Row 2
  Row 3
  Footer Row with Add new row button 
  </code></pre>
  
  <p>When the add button is clicked it should look like this: </p>
  
  <pre><code>Row 1 
  Row 2
  Row 3
  New Row added 
  Footer Row 
  </code></pre>
  
  <p>Here is my code: </p>
  
  <pre><code>function addAddHocRow(tr) {
  
      $('#tblBuilder_Body tr:last').before(tr); 
  }
  </code></pre>
  
  <p>tr is passed from the button click method. The above code removes the footer row.</p>
  
  <p>The tr comes from the link button which is added as a column of the html table dynamically. </p>
  
  <pre><code>function addAddHocRowLink(td) {
  
      var addLink = $("&lt;a/&gt;").click(function() {
  
          addAddHocRow($(td).parent());
  
       }).text("Add"); 
  
      $(td).append(addLink); 
  }
  </code></pre>
  
  <p>Actually I am making a new TR object and then populating the TD's. Each td has certain element like checkbox, dropdownlist etc. And after that the tr is added to the table.</p>
  
  <p><strong>UPDATE 2:</strong> </p>
  
  <p>Here is some code that shows how the tds are populated. </p>
  
  <pre><code>var addHocRowTds = $(addHocRow).find('td');
   // append add button
      addAddHocRowLink(addHocRowTds[6]);
  </code></pre>