javascriptでtableセルの操作

Question

railsである表を作成しています。
受け取ったパラメータによって毎回異なる配列が返ってきてそれをeach_with_indexとかで毎回出力しています。

が、theadのセルは変わりません。
theadはindexを持つ10個のセルが並んでいます。(each_with_index使ってます)
毎回eachで出力している値にはそれぞれ異なるidが振られていて、そのidとtheadのindexを一致させたいと思っています。

しかしeachで回すとどうしてもズレてしまいます。( 左詰めになってしまう )
というのも返ってくる配列の要素というのがtheadのセルの数と一致するとは限らないためです。
railsでどうにかしたいんですが、解決策がわからないためtheadのindexとセルのidによってjsで表示させる場所を調整できないかと思いました。

jsはほぼ書いたことがないのでそういった操作ができるかどうか分からず質問しました。
できそうであればコードまでは結構ですので、ざっくりどんな手順でできそうか指南して頂けると非常に助かります。
よろしくお願いします。

Comments

[KiKiKi_KiKi]

現在出力される事がある困った例のHTMLと、その例の場合どのセルのIDがどのthに入るようにしたいのか、といった具体的なものを提示して頂けると回答しやすいかと思います。

Answer 1

jsを使った方法ではないですが、たとえばview側で以下のように設定する方法はどうでしょうか。
かなり原始的かもしれませんが

<tr> <% if resource.count == 1 %> <td colspan="10">xxx</td> <% elsif resource.count == 2 %> <td colspan="5">xxx</td> <td colspan="5">yyy</td> ... </tr>

Answer 2

画面上では見せないダミーのセルを記述し、cssで見せなくするのはどうでしょうか。

.hidden-cell {visibility:hidden;}

<table>
  <thead>
    <tr>
      <td class="col-1">ひとつめ</td>
      <td class="col-2">ふたつめ</td>
      <td class="col-3">みっつめ</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-1 hidden-cell">みえません</td>
      <td class="col-2">にこめ</td>
      <td class="col-3">さんこめ</td>
    </tr>
    <tr>
      <td class="col-1">一番左</td>
      <td class="col-2 hidden-cell">みえません</td>
      <td class="col-3">一番右</td>
    </tr>
  </tbody>
</table>

Answer 3

確認ですが、<thead>の中のセル数は固定だが、パラメータによって<th>の中のセル数は変わる、ということでしょうか？それであれば、例えば取得できた配列が10よりも小さい場合、空のセルを追加するなりcolspanで最後のセルを大きく取る等、Railsだけでも対応できそうに思いました。

Comments

[Takkiii]

すみません、thのセル数は変わらないんです。theadのセル数以上にはなりません。振ってあるidもtheadのセル数が上限になります。

振ってあるidとindexを判定して、表示させる列を合わせたいです。indexは固定で常に存在しますが返ってきた配列の要素にindexと一致するidの要素がない場合があるので、そこは空にするかハイフンなどで対応したいのですがどうもそこのロジックが考えつきません。

thead内でeachを回してそれはindexを持たせるんですが、次のeachがtbody内になるので、そのeachの中 ( つまり返ってきた配列の中身を表示する部分ですね ) ではtheadのindexを読めないのもあってどうすべきかと。

分かればよろしくお願いします。

[退会済みユーザー]

indexは「配列の何番目を示すindex」で、idはindexのような数値ととらえて良いのでしょうか？

出力されるHTMLの例をいくつかあげていただくと回答がつきやすくなると思います。
10個セル全てを例に上げるのではなく、3個程度のセルで、ダメな例とOKな例の2つで十分です。

JavaScriptでなんとかするにしても、全体的な画面の構成が私にはよくわからないので、JavaScriptでも難しそうに見えます。すみません。