Issue cloning to the last row

Working on a dynamically built table I can clone a row and manipulate it incrementing name{keys] removing attributes and classes as needed and in most cases place this clone at the end of the table using

clone().appendTo($('table tr:last'));




clone().appendTo("#TBody tr:last");

But the table content is dynamic in that some cases the cell would have rowspan="number" on some of the cells followed by a new <tr> which has cells for the other columns. For example.

<tbody id="TBody">
	<tr class="d-none">
		<td rowspan="2"></td>
		<td rowspan="2"></td>
		<td rowspan="2"></td>
	<!-- New row is being placed here -->
	<!-- New row should go here -->

Looking like this.

and so when adding a row using any method above the row is NOT being added after the last <tr> row but instead after the last full row, which breaks the table. So tr:last is NOT pointing to the last <tr>. It should go before </tbody>. Any ideas?

That’s an invalid selector.

It should be


When trying this cloning a normal row, I am getting double rows added. I haven’t tried on the table with rowspan…

var secondlast = $(".d-none");	
var newClone = secondlast.clone().appendTo($('table tr:last-of-type'));

I bet you probably have 2 elements matching this variable:

var secondlast = $(".d-none");	

Add in this console log:

1 Like


Object { 0: tr.d-none, length: 1, prevObject: {…} }

tr:last only adds one row.

Thank you for the help.

You know I got to messing with things so much trying fix the clone placement…

		var secondlast = $(".d-none");	
		//var newClone = secondlast.clone().appendTo("#TBody tr:last-of-type");	
		var newClone = secondlast.clone(); 	 	
    //var newClone = secondlast.clone().appendTo($('table tr:last'));				
    //var secondlast = $('table tr:first');
		//var secondlast = $('table tr:last').html($(".d-none")); 
		//var secondlast = $(".d-none");	//promising
		//var secondlast = $('#TRow').html($(".d-none");		
		//var secondlast = getElementsByClassName("d-none"); 
		//var trs = getElementsByClassName(".d-none");
		//var secondlast = $('table tr:last');
   // var newClone = secondlast.clone().appendTo("#TBody");
    //var newClone = secondlast.clone().($('#TBody tr').length);
    //var newClone = secondlast.clone().appendTo($('table tr:last'));

… and looking at these lines of code that I wasn’t even looking at the section where I am manipulating newClone AND THEN ADD IT TO page with insertAfter(); daaa!

After just defining newClone

var newClone = secondlast.clone();

… and changing the insertAfter() line to this everything works great.

newClone.insertAfter("#TBody tr:last-of-type");

I guess I need a break after I clean up this mess… Thanks for your help!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.