RJSでテーブルを操作する時の注意

rails 
render :update do |page|
end

形式で、テーブルに列を動的に追加する場合の注意。
tableに対して直接にtrを子要素として作ろうとすると、tbodyが追加のたびに勝手に生成されてしまう*1。


対策として、テーブル構造を

<table>
  <tbody>
    <tr><td>header</td></tr>
  </tbody>
  <tbody id='table_body'>
  </tbody>
</table<

のようにtbodyを使って組んでおき、tbodyに対して行を追加・削除すればよい。
たとえば以下のような感じ。

resultset = Person.find :all, :conditions => ["id between ? and ?", from_id, to_id]
render :update do |page|
  #上側に追加するとき
  page.insert_html :top, :table_body, :partial => "row_render", :locals => {:resultset => resultset}
  #下側に追加するとき
  page.insert_html :bottom, :table_body, :partial => "row_render", :locals => {:resultset => resultset}
end

link_to_remote と組み合わせて使うと、1行単位でスクロールするテーブルが簡単にできたりする。
使い道があるかどうかはわかんないが。

*1:FireFoxで確認