CODEWITHSUNDEEP
jquery
Dimitri
Dimitri

Reputation: 1976

Jquery first table, last row selection

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

Answers (1)

Blazemonger
Blazemonger

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

Related Questions