CODEWITHSUNDEEP
javascriptjqueryhtmldom
Jan Petzold
Jan Petzold

Reputation: 1571

Remove rows from an HTML table

I have a rather big table where I dynamically remove some rows. It works, but it is very slow. Right now it takes approx. 1.5 seconds to remove 50 rows on IE8 and Firefox (almost no difference between the browsers).

I know that DOM manipulation is slow in general, but there must be a faster way to do this.

Right now, I'm using this syntax:

$("#myTable tr").slice(250, 300).remove();

The offsets in the slice() method may vary. I use slice() since this was recommended in jQuerys help and other methods to perform the same thing - like find() or eq() - where not faster. I read about doing an empty() before the removal, but that was even slower.

Upvotes: 1

Views: 3587

Answers (6)

Phil H
Phil H

Reputation: 20141

Consider using the actual javascript, in case jQuery is triggering render refreshes: http://jsfiddle.net/MbXX5/

var removeRows = function(ofTable,from,to) {
    for(var row=to; row>=from; --row) {
        ofTable.deleteRow(row);
    }
};

As you can see in the jsfiddle, this is instant. Note that I'm traversing the array in reverse, so that the row numbers remain correct. There is a chance this improves the performance, depending on the DOM code and the JIT strategies the browser uses.

[Edit: new jsfiddle with colour-coded cells to make it really obvious which rows have gone]

Upvotes: 4

YogeshWaran
YogeshWaran

Reputation: 2281

Try this . i hope it will help you

$("#myTable tr").slice(250, 300).html('');

Upvotes: 0

Salketer
Salketer

Reputation: 15711

The problem is that for every row that you .remove(), the table is redrawn by the browser. To make it faster, remove the table from the DOM, take out the lines and put the table back at its place.

$table = $("#myTable").clone(true,true);//First true to keep events, second true to deepcopy childs too. Remove it if you do not need it to make it faster.
$table.find("tr").slice(250,300);remove();
$("#myTable").replaceWith($table);

Upvotes: 4

Mike de Klerk
Mike de Klerk

Reputation: 12328

Is it possible you add an ID to each row? And then select the rows directly by ID and removing the rows? Like so: 

var el = document.GetElementById("RowID_1");
document.removeChild(el);

jQuery is on top of Javascript. I guess using javascript directly is faster.

edit: Ofcourse you can create a loop like this:

for(i=250;i<=300;i++)
{
    var el = document.GetElementById("RowID_" + i);
    document.removeChild(el);  
}

edit 2: Hide the table while editing so the browser does not update after each removal ? ;)

Upvotes: 0

xception
xception

Reputation: 4287

The problem is the browser tries to update the screen view of the DOM on each row removal.

You can do it by one of

  • removing the table, from the document, removing all rows and after that inserting it back
  • cloning the table, removing elements on the clone, replacing the table with the clone
  • or if the amount of rows remaining is less than the ones remove, you could create a new table, insert all the rows in that and replace the existing table with the new one

The main idea is for the table to not be attached to the DOM when you do the removals, this way it will only update the view once all the rows are removed.

Upvotes: 0

Anoop
Anoop

Reputation: 23208

You can use filter but I don't think it will be faster 

$("#myTable tr").filter(function(index){
     return index > 250 && index < 300;
).remove();

Upvotes: 1

Related Questions