Dynamically Adding Table Rows Using jQuery
<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>
