Add rows to jQuery table after the the present row

Question

Hello,

I wanted to know how do I go about adding rows after a particular row in my datatable. I'm using the jQuery datatables plug-in for this purpose.

I can pass the table row Index. that I need to insert the row to my javascript function, as follows:

function addNewContact(rCount){ .. }

And my HTML code is:
table id="exampleTbl"
tr
td..../td (data of first column)
td..../td (data of second column)
...
td
input type="button" id="addNewContact<%=rCount %>" name="addNewContact_Details" value="+" onclick="javascript:addNewContact(<%=rCount %>);"
/td
/tr
/table

For the newly added row, I want the first 3 columns as blank, and other columns(5) to contain text boxes.

Answer 1

Assuming your table looks like this:

<table id="exampleTbl">  
    <tr>
        <td>....</td>
        <td>....</td>
        ...  
        <td>
           <button type="button" class="addRow" />+</button>
       </td>  
    </tr>
</table>

You can add a click handler to the buttons that adds a row like this:

$(function() {
    // HTML template of a row
    var html = '<tr><td></td>...<td><button type="button" class="addRow">+</button></td></tr>';

    $('#exampleTbl').delegate('button.addRow', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button
        $(html).insertAfter(row); // insert content
    });
});

Some notes:

• The code is executed once the DOM is loaded, due to $(function(){...}).
• The click event is caught by the table. This ensures that also buttons of the newly inserted rows work.
• Don't mix styles. If you use jQuery, don't attach click handlers via the onclick attribute in the HTML. It makes your code hard to maintain and you are more flexible doing it the jQuery way.

Hope that helps, if you have questions about this, please comment on this post.