Question

I am running into a problem. I was using:

$(this).parents("tr:first").remove();

to delete the row the user clicked on and then:

var row = $( #picTableDisplay tbody>tr:last ).clone(true)
            .insertAfter( #picTableDisplay tbody>tr:last );

to replace a new (empty) row at the bottom of the table.

But, when the table is full (12 rows) and the user wants to remove a row, the bottom table (that has data) gets cloned (with the data).

In this scenario, how do I remove the clicked on row and add a row to the bottom of the table that is empty?

Thanks.

Answer 1

It seems to be doing exactly what you ve told it to do... cloning the last row, with or without data.
The solution is simple - don t do it.

Clone a last invisible row (so you have 13 rows), or
Clone the row from a template you keep on the side, eg:
```
$( #RowTemplate tr ).clone(true).show() 
```

Another option is to copy the row when the page is loaded, and then recloning it:

var rowTemplate = $( #picTableDisplay tbody>tr:last ).clone(true)

$( #picTableDisplay tr ).click(function(){
   $(this).closest( tr ).remove();
   var row = rowTemplate.clone(true) //...
});

Please also note there s a known bug with cloning the last element on IE, as detailed here: Problem using jQuery clone function in form.

友情链接