javascript - 根据相似索引将 tbody td 附加到 th

Question

我正在尝试将 tbody td 附加到具有类似索引的 thead th。

$("table").find("th").each(function(i, e) {
  console.log(i, e)
  $(this).attr('head-index', i)
});

$("table").find("td").each(function(i, e) {
  console.log(i, e)
  $(this).attr('row-index', i)
});

var tableTH = $("table > thead > tr > th");
var tableTR = $("table > tbody > tr > td");

if ($(tableTH).attr == $(tableTR).attr) {

} else {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 7</td>
      <td>Content 8</td>
    </tr>
  </tbody>
</table>

此功能仅在移动 View 中触发。

预期的最终结果。

enter image description here

*Edited(What is there's more TR)

Answer 1

您可以使用 .each()遍历标题，以及一个属性选择器来选择获取具有相同索引的行。

$("table").find("th").each(function(i, e) {
  $(this).attr('head-index', i)
});

$("table").find("td").each(function(i, e) {
  $(this).attr('row-index', i)
});

var tableTH = $("table > thead > tr > th");
var tableTR = $("table > tbody > tr > td");

tableTH.each(function() {
  var index = $(this).attr("head-index");
  var row = tableTR.filter(`[row-index=${index}]`);
  $(this).after(row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
      <th>Content 3 Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
  </tbody>
</table>

我用了.after()而不是 .append() .您不能附加 <td>在 <th> 里面, 他们都必须是 <tr> 的 child .