[jQuery] Efficiency problem with updating entries in a table
I have the following efficiency problem:
I want to update entries in a table, say those with class "xyz". Here
are two variants A and B.
A. Rebuild the complete inner html of the table in a string
table_html and then call $("table").html(table_html).
B. Update the cells in question via $("td.xyz").html(cell_html) or a
related construct if the entries differ from cell to cell.
I would like to do B, because significant parts of my table remain
fixed, have click events associated with them, which I would have to
re-associate if I did A, etc.
However B is really slow compared to A, and the difference grows with
the table size. For example, on a table with 5 rows and 50 columns,
approach B takes around 300 milliseconds on my machine, while A stays
below 50 milliseconds.
Any ideas why this is so and how I can get B to work faster?
Holger