Question

How can I update every cell of the following large table (10 rows X 30 columns) using AJAX?

<table>
  <tr>
    <td>puts @table[0][0]</td>
    <td>puts @table[0][1]</td>
    ... 27 columns go here
    <td>puts @table[0][29]</td>
  </tr>
  ... 8 rows go here
  <tr>
    <td>puts @table[9][0]</td>
    <td>puts @table[9][1]</td>
    ... 27 columns go here
    <td>puts @table[9][29]</td>
  </tr>
</table>

I was able to update the cell at row 0 and column 0 by giving it a specific id, as follows

    <td id="r0c0">puts @table[0][0]</td>

and using the following javascript, which is working fine

document.getElementById("r0c0").innerHTML = '<%= @new_r0c0_value %>'

but since the table is very large (300 cells) I’m looking for an idea how to update the 300 cells from an array of values without identifying each table’s cell with a specific id.

Anyone has a smart idea how to pass an array in the AJAX response and how to update this large table using that AJAX response?

Answer 1

If you put an id on the table tag itself, you can get all cells in the table into an array like this:

document.getElementById('myTable').getElementsByTagName('td');

You will then have an array of all the td elements in the table which you can loop through and update.

In some browsers, it may perform better to just remove the entire table and construct a new one with the new data in it rather than individually changing all the cells. The issue is that since tables can have dynamic layout, the browser may not be very efficient about relaying out the table each time you change a cell.