Reputation: 1976
I'm having issues with the tr:last
selector.
I have a basic table:
<table id="myTable">
<tr>
<td>1</td>
<td></td>
</tr>
</table>
When the user clicks on a link, It adds an addtional row to my table using:
$("a#more").live("click", function(){
$table = $('#myTable');
var a = $table.find('tr:last').clone(true);
$table.find('tr:last').after(a);
});
Which works like a charm. However, the issue starts when I decided to add an additional table in the last td
of my table:
<table id="myTable">
<tr>
<td> 1 </td>
<td>
<table id="myTable2">
<tr><td> Additional Information </td></tr>
</table>
</td>
</tr>
</table>
WHen I use clone
this time, it picks the last row of my second table and copies a new row to my second table. My goal is to duplicate ONLY the entire last row of my first table and creating a new tr
with all of the contents in it (including a copy of the second table).
I'm not sure how to go about this.
Upvotes: 2
Views: 1175
Reputation: 93003
Instead of
var a = $table.find('tr:last').clone(true);
Use .children()
to restrict it to the original table:
var a = $table.children('tbody').children('tr:last').clone(true);
Upvotes: 5