Geek Answers Handbook

Is there a quick way to delete table rows using jQuery

I have a table of 50 odd rows with 11 columns. Each row has a unique id, consisting of id="row_<clientid>_rownumber". The second column has a checkmark withid="group_<clientid>_<petid>_rownumber"

Edited screenshot http://www.forsythesit.com.au/res/img/slowrowremoval.jpg

When the user clicks the checkbox, I want to delete all rows except those 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 that in IE I get the warning "script is taking too much time."

Is there a faster method to delete many lines?

BTW: 4.4 seconds required using jQuery 1.4.3 and 1.3 seconds with jQuery 1.4.2

The problem is solved thanks to everyone. The final hint @VisusZhao. This is the final working snippet:

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

Thank you all

+5
source share
5 answers

you can first save the row for the client,

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

then delete the table

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

then paste the line back

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

it will not take any cycle, therefore its constant time

+2
source

First of all, give the table id.

<table id="departures">

Save all the necessary lines in the jQuery object and only those that are inside #departures.

var $departures = $("#departures");
var $rows = $("tr[id^=row_]", $departures); //

This way jQuery will not go through the DOM every time you execute the function, because it will be stored inside the object.

Then use your code as usual

var sClient = $(this).attr("id").substring(6); // trim off group_
sClient = sClient.substring(0,sClient.indexOf("_")); // trim off _row

When replacing the last line with

$rows.not("tr[id^=row_" + sClient + "]", $departures).remove();
+1
source

, .filter, :

var sClient = this.id.substring(6); // trim off group_

$("#table_id tr").filter(function(){
    return (this.id.indexOf('row') === 0 && this.id !== sClient);
}).remove();

, , , :

var sClient = this.id.substring(6); // trim off group_
$('#table tr.' + sClient).remove();

, Marko , IE.

0

jQuery. jQuery , , , . . , , . :

var tableElement = $("#table_id"); // only do this once on page load
tableElement.find("tr:not(." + sClient + ")").hide();

, , , , .

0

:

<table id="alldepartures">

Next, save for each line idif you need it, but also add a CSS class in the format "client_ {id}":

  <tr class="client_123">

This is normal because you can have multiple lines with the same class.

Then in your code:

var sClient = $(this).attr("id").split('_')[1];
//remove all rows that don't have this class
$('#alldepartures').find('tr[class!=client_' + sClient + ']').remove();

I think other code may suffer, especially in IE, when trying to do an ID-based mapping, since jQuery has to do extra work in IE to overcome its erroneous implementation of getElementById (id).

0
source

More articles:


All Articles