CODEWITHSUNDEEP
javascriptjqueryloopsdom
user2182000
user2182000

Reputation: 29

Iterating through table with rows more than 500 and 15 columns using jquery

Here is the challenge; how can I iterate (+change the elements properties,while doing so) over table consisting more than 500 rows using jquery/Javascript? The added challenge is that the browser is IE8.

I tried using for loop and $.each over the table... I got the thing working, but its slowing down the damn IE and throwing script error(Error: Do you want to continue this script? It may slow down your computer..bla bla bla).

The problem is not to know how to iterate and change the properties of individual columns, but how to optimize this process.

Any help is much appreciated.

Upvotes: 0

Views: 1161

Answers (2)

Teemu
Teemu

Reputation: 23406

In general, if you're executing a time-critical task, don't use jQuery. Every $('.classname') executes at least 20 jQuery lines, and especially in case of IE8, also a ton of native iterating through the document.

There's a limit for script lines executed in IE8. By default it executes one million lines, then user is asked, if he wants to continue the script. This limit is controlled by registry, but in case of a web app, it's not usefull to increase the value ofcourse.

In IE8 rendering speed is also an issue.

  • Use minimal styling in general
  • Try to avoid setting innerHTML / innerText, use createElement() and/or createTextNode() and appendChild() and/or insertBefore() instead.
  • Avoid inline styles, rather change class names, or even use direct CSS rule manipulation instead.
  • Cache elements as much as possible when using getElementsBy/Tag/Class/Name().
  • Use cahched table.rows and table.rows[n].cells collections where ever possible.
  • Consider to show only a part of the table at a time, it makes rendering faster.

Upvotes: 2

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

Have u tried this 

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}

Upvotes: 1

Related Questions