Question

I have a table of 50 odd rows with 11 columns. Each row has a unique id made up of id="row_<clientid>_rownumber". There is a checkbox in the second column with id="group_<clientid>_<petid>_rownumber"

Redacted Screenshot http://www.forsythesit.com.au/res/img/slowrowremoval.jpg

When the user clicks a checkbox I want to remove all rows except any that belong to the selected client. I have code that works as follows:

var sClient = $(this).attr("id").substring(6); // trim off group_
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off anything after clientid
$("tr[id^=row_]").not("tr[id^=row_" + sClient + "]").remove(); 

The problem is it takes so long that in IE I get the “script is taking too long” warning.

Is there a faster method to remove many rows?

BTW: It takes 4.4 seconds using jQuery 1.4.3 and 1.3 seconds with jQuery 1.4.2

Problem Solved thanks to all. Final hint provided by @VisusZhao. This is final working snippet:

var KeepRows = $("#bookingstable tbody tr[id^=row_" + sClient + "_]");
$("#bookingstable tbody").empty();
$("#bookingstable tbody").append(KeepRows);

Thank you all

Answer 1

you can first store the row for the client,

var clientRow = $('#row_' + sClient);

then empty the table

$('#table_id tbody').empty();

then insert the row back

$('#table_id tbody').append(clientRow);

this will take no loop, so its constant time