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>

---

如果需要，您也可以动态附加相同的结构；这是一种方法：

$("#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")