How to create a table dynamically

I am trying to create a report in the form of a dynamically built HTML table.

So - the idea is that I would load in the data-set, clean it up as needed, add the checks I wanted and any field that does not pass the test would get a value other than “OK”. (The exception is that the date column will just return a date. But that’s not important here).

My problem is - how do I spin through my loop and add rows as needed and then add data to each of those rows as my checks are completed.

Currently this is the code: https://github.com/SabahatPK/TestDataFiles/blob/master/js/main.js

But that’s obviously not heading in the right direction:

Help!

I’d suggest just recreating the entire table with your new data rather than trying to manipulate it in-place. If your table is gigantic (many hundreds of rows or more) to where this would be too slow, I suggest switching to something like React, where you can still recreate the whole table and it’ll only recreate what actually changed (as long as you properly use the key attribute).

Obviously switching to React is a tall order, but it really is the way to go for this sort of thing. You’ll thank yourself later.

1 Like

Thanks @chuckadams!

For anyone that is interested, I followed the solution outlined here ==> https://www.valentinog.com/blog/html-table/