Как обновить большую таблицу из ответа AJAX?

Question

Как я могу обновить каждую ячейку следующей большой таблицы (10 строк X 30 столбцов), используя 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>

Мне удалось обновить ячейку в строке 0 и столбце 0, дав ейконкретный идентификатор, как показано ниже

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

и с использованием следующего JavaScript, который прекрасно работает

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

, но так как таблица очень большая (300 ячеек), я ищуИдея, как обновить 300 ячеек из массива значений без идентификации ячейки каждой таблицы с определенным идентификатором.

У любого есть умная идея, как передать массив в ответе AJAX и как обновить эту большую таблицу, используяэтот ответ AJAX?

Answer 1

Если вы поместите идентификатор в сам тег таблицы, вы можете получить все ячейки таблицы в массив, подобный этому:

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

После этого у вас будет массив всех элементов tdв таблице, которую вы можете просматривать и обновлять.

В некоторых браузерах может быть лучше просто удалить всю таблицу и создать новую с новыми данными в ней, чем индивидуально изменять все ячейки.Проблема заключается в том, что, поскольку таблицы могут иметь динамическое расположение, браузер может не очень эффективно отображать таблицу каждый раз, когда вы меняете ячейку.

Answer 2

Вы можете использовать селектор : nth-child , если используете JQuery.Я делаю это таким образом, чтобы выделить текущую обновленную запись в списке таблиц с помощью 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);
...

Выбор n-го ребенка с указателем и выделением.

Answer 3

Попробуйте это ..

Если вы можете создать массив, подобный этому [[1,2, .. 27], [1,2, .. 27], .. [1,2 ,..27]]

тогда легко загрузить данные в эту таблицу без использования идентификатора или чего-либо еще.

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