jquery - jQueryを使用して位置を動的に計算し、ヘッダーをhtmlテーブル列のグループに配置する方法

Question

テーブル内の列のグループのヘッダーとして機能するラベルを配置する必要があります。ラベルは7列目と12列目の終わりから始まり、7〜12列をカバーする必要があります。 jQueryでこれを行うことができますか?

Answer 1

コメントで述べたように、javascript をまったく使用する必要はありません。

<table>
  <tr>
    <th colspan=6 style="visibility:hidden"> </th> <!-- 1..6 -->
    <th colspan=6> header for 7-12 </th> <!-- 7..12 -->
  </tr>
  ...
</table>

---

必要に応じて、同じ構造を動的に追加することもできます。ここに1つの方法があります：

$("#my-table").prepend(
  $("<tr>").append(
    $("<td>",{colspan:6})
      .css({visibility:"hidden"})
  ).append(
    $("<td>",{colspan:6})
      .text("header for 7-12")
  )
)

---

colspan を使用したくない場合は、ヘッダーを手動で配置する必要があります。ここにスケッチがあります（テストされていません）：

var header = $("<div>")
  .css({position:"relative", top:0})
    //note the use of 'relative' to allocate space
  .text("header for 7-12");
var table = $("#my-table");
table.prepend(header.wrap("<tr><td/></tr>"));

(function recalculate(){
   header.css({
     left:$("td:nth-child(6)",table).offset().left - table.offset().left,
     width: table.width() - $("td:nth-child(6)",table).offset().left
       //assuming there's no 13th column
   })
})(); //invoke now

$(window).on("resize", recalculate);
table.on("my-data-change", recalculate);
  //when you change the table, do $("#my-table").trigger("my-data-change")