HTML: Fastest/Best way to update contents of many cells in a large table (jQuery or JavaScript)

All,

I'm working on an HTML page that includes a large data table.

As the user interacts with a variety of controls on that page, I'd like the data in the table to update, without reloading the page.

In other words, when the user changes the value of a control, that triggers a JavaScript function that performs a number of calculations, then "updates" the data in the table. In a typical scenario, anywhere from 50 to 500 cells would require updating.

My baseline approach:

• assign each <td> cell a unique ID
• in the JavaScript function, use document.getElementById() to get a reference to each cell that needs updating
• use innerHTML to update those cells

This works fine, but it's probably very slow. E.g., does each call to innerHTML force the browser to re-ren开发者_如何学编程der the entire table? In other words - does updating 500 cells trigger 500 're-renders'? Or, does the browser only re-render the table once the function is complete?

Long story short, what's the best way to do this?

• My current approach?
• recreate the entire table as a string in JavaScript, then use ONE call to innerHTML on the div that contains the table?
• something else?

I recently watched Paul Irish's EXCELLENT (imo) presentation about optimizing JavaScript performance:

DOM, HTML5, & CSS3 Performance

In that, he describes making changes "off DOM"; unfortunately - that's mostly over my head, and his presentation doesn't include any actual code examples.

I'd prefer a straight JavaScript solution, but I'd be happy with a jQuery solution as well.

Many thanks in advance for any advice or insight.

I think using innerHTML is the way to go. If each cell has it's own ID then the browser does not need to refresh the whole table to update a single cell. I am using innerHTML in my current website that I am building and it works very quickly. As long as you assign the function to the correct action that should work well. If multiple cells will have the same value, then consider using classes, in which case jQuery does make it easier to reference classes.

So basically, use your current approach. Just re rendering each cell when needed is the quickest way (from my understanding and logic)

The approach you are taking is OK. However, it would be advisable to use jQuery or another abstraction library, which will take care of any quirks in the implementation of innerHtml in various browsers (some browsers are case sensitive etc.); this will make your life easier, and leave you to concentrate on developing your logic rather than working on browser idiosyncracies.

this question might be argumentative ... but I would suggest using something like jQuery jGrid plugin

it seems to me might be better that way