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元素的数组，您可以循环并更新。

在某些浏览器中，只需删除整个表并构建一个包含新数据的新表而不是单独更改所有单元格，它可能会表现得更好。问题在于，由于表格可以具有动态布局，因此每次更改单元格时，浏览器可能无法有效地转发表格。

Answer 2

试试这个..

如果你可以像这样构造一个数组 [[1,2，... 27]，[1,2，... 27]，.. [1,2，... 27]

然后很容易将数据加载到该表中而不使用ID或其他任何内容。

<table>
        <% arr.each do |inner_arr| %>
                <tr>
                <% inner_arr.each do |val| %>
                        <td><%= val %></td>
                <% end %>
                </tr>
        <% end %>
</table>

Answer 3

如果使用JQuery，您可以使用:nth-child选择器。我这样做是为了突出显示Ajax表格列表中当前更新的记录。

我有@assets是所有对象的集合，而@asset是更新的当前记录。表格的 _assets.html.erb 部分如下所示：

<% @assets.each_with_index do |asset, index| %>
  <tr class="link">
    <td class="num"> <%= link_to index + 1, asset, :remote => true, :onclick => "$('#spinner').show()" %> </td>
    <td> 
      <%= link_to asset.try(:patient).try(:display_name), asset, :remote => true, 
        :onclick => "$('#spinner').show()" %> 
    </td>
    ...
  </tr>
<% end %>

并在 update.js.erb ：

中执行此操作

...
$("#assets").html("<%= escape_javascript( render "assets" ) %>");

$("table.listing > tbody tr:nth-child(<%= @assets.index(@asset) + 1 %>)").effect("highlight", {}, 3000);
...

选择带索引的nth-child并突出显示。

如何从AJAX响应更新大表？

3 个答案: