When making editable table in html, is it preferable to keep table content in array?

Question

So, I have some data that I get from a service in json. I need to present it in a table, with various editable controls. It can then be edited and saved back.

I imagine two options:

1. Put the data into a javascript array, and edit them in the array, and update the dom. Then send the array when saving.
2. Keep everything purely in dom and then parse the dom, when I need to save.

But I'm starting to realize that I should probably think a little bit about performance as well. Is one method preferable over the other, when it comes to memory consumtion in the browser?

Are there options that are better than these?

Answer 1

The second option is much slower, as parsing the dom while getting the data is pretty slow. You should ideally update the dom from the array in javascript via bindings. Although it depends how big your table is, but using bindings is generally pretty fast and easy to code too. Only when the DOM nodes start to approach the size of a medium excel sheet (10000 rows, etc), then you'll have memory troubles and stuttering browsers, but till then it's the best way!