Adding rows dynamically jQuery -(copying existing HTML)

Question

Hello all,

I was looking at adding rows dynamically to my HTML table using jQuery with the following requirement.

The table has 9 columns, of which 1 columns has a button for adding a new row. The new row added should be added after the current row and have the first 7 columns blank, 8th column should be a exact replica of the previous rows 8th columns, and 9th column should have option for adding another row/deleting row(something like +/- buttons).

My HTML code is as follows:

<table id='contactInfo'>
    <thead>...</thead>  
    <tbody>  
        <tr>  
            <td>...data for the first 7 columns..</td>  
            <td>  
                <input type="text" id="newContactComment<%=rCount %>" name="newContactComment" size="45">
                <br>
                <input type="checkbox" id="commentText<%=rCount %>" name="commentText" value="<%=c.getComment_text() %>" class="consComment">&nbsp;
                <%=c.getComment_text() %><br> 

And the jQuery code is as follows:

$("#contactInfo").each(function(){  
    $("button.addCommentRow", this).live('click', function() {  
        var html = '<tr><td>..blanks for first 7 columns </td> <td>...what goes in here..??..</td>  </tr>';  
        var row = $(this).closest('tr'); // get the parent row of the clicked button  
        $(html).insertAfter(row);  // insert content  
                 ...code to delete the newly added row..  

I've included the part that I was getting confused about in 'what goes in here..??..'
Any suggestions/ideas would be highly appreciated.

Thanks,
Pritish.

Answer 1

get the content of the 8th column of the clicked row

var column_eight = row.find("td:nth-child(8)").html();