javascript - 如何从 AJAX 响应更新大表？

Question

如何使用 AJAX 更新以下大型表格(10 行 X 30 列)的每个单元格？

<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>

我能够通过给它一个特定的 ID 来更新第 0 行和第 0 列的单元格，如下所示

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

并使用以下 JavaScript，运行良好

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

但由于表格非常大(300 个单元格)，我正在寻找一种想法，如何从值数组中更新 300 个单元格，而不用特定 id 标识每个表格的单元格。

有人知道如何在 AJAX 响应中传递数组以及如何使用该 AJAX 响应更新这个大表吗？

Answer 1

如果你在表格标签本身上放置一个id，你可以将表格中的所有单元格放入一个数组中，如下所示:

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

然后，您将获得表中所有 td 元素的数组，您可以循环遍历并更新该数组。

在某些浏览器中，删除整个表格并使用其中的新数据构建一个新表格可能比单独更改所有单元格效果更好。问题是，由于表格可以具有动态布局，因此每次更改单元格时浏览器可能无法非常有效地重新排列表格。