AJAXレスポンスから大きなテーブルを更新するには？

Question

AJAXを使用して、次の大きなテーブル（10行×30列）のすべてのセルを更新するにはどうすればよいですか？正常に動作され、次のJavaScriptを使用して

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

とを次のように

<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のセルを更新することができた

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

ですが、テーブルが非常に大きいので（300セル）、特定のIDを持つ各テーブルのセルを識別せずに値の配列から300個のセルを更新する方法を探しています。

誰もが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

:nth-childセレクタは、JQueryを使用する場合に使用できます。私はこの方法で、Ajaxを使ったテーブルのリストで現在更新されているレコードを強調表示しています。

私はすべてのオブジェクトのコレクションである@assetsを持っています。@assetは更新されている現在のレコードです。

<% @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で次の操作を行います：

インデックスを持つn番目の子を選択

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

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

テーブルで部分_assets.html.erbは次のようになります強調表示します。