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 t

Solution 1:

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.

Solution 2:

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 loopfor (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
   }  
}