What is better for performance: Update specific cells or replace entire table ?

Question

My project requires that I update the contents of a specific column in an HTML table via an AJAX call to a PHP script.

In terms of workload: The table contains about 4 columns and about 20 rows (more rows could be added with time).

What would be more (or most) efficient:

1. Replace ONLY the column/specific cells that need to be updated
2. Replace the entire table with the updated data

For some context: The table basically contains the name of servers in one column and their respective online status in the adjacent column. The user clicks a button to check the status of all the servers, subsequently jQuery would be called upon to update the Online Status column after the query has completed.

Answer 1

Replacing the rows and cells that need to be will likely be faster. Though, at about 20 rows, you won't even notice a difference.

Answer 2

The only way to get the best answer is to simply benchmark each approach. It depends a lot on how your HTML generation code performs. If it's quite fast, it might be faster to build your HTML from scratch and do an innerHTML assignment on the table's parent. But if it's slow, it might be faster to iterate through each table cell and replace the contents of each. You should just run a simple benchmark.

Also, as zneak notes, it's unlikely anything you do with 20 table rows would be noticeable.