Issue cloning to the last row

JavaScript
1

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'));

OR

clone().appendTo("#TBody");

OR

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>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<!-- New row is being placed here -->
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<!-- New row should go here -->
</tbody>

Looking like this.

table
table1626Ă—93 405 Bytes

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?

2

That’s an invalid selector.

It should be

tr:last-of-type
3

OK.
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'));

table2
table21625Ă—313 5.69 KB

4

I bet you probably have 2 elements matching this variable:

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

Add in this console log:

console.log(secondlast);
1 Like
5

Nope;

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

Note:
tr:last only adds one row.

6

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(); 	 	
		secondlast.removeClass("d-none");
    //var newClone = secondlast.clone().appendTo($('table tr:last'));				
		//console.log(secondlast);
		//newClone.find('.country-cell').removeAttr("rowspan");
		//newClone.find('.state-cell').removeAttr("rowspan");
		//newClone.find('.city-cell').removeAttr("rowspan");	
						 
    //var secondlast = $('table tr:first');
		//var secondlast = $('table tr:last').html($(".d-none")); 
		//alert(secondlast);
		//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'));
		//secondlast.removeClass("d-none");

… 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