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

Question

我正在尝试将tbody td附加到具有相似索引的主题。

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

仅在移动视图中会触发此功能。

最终结果预期。

enter image description here

*已编辑（还有更多TR）

Answer 1

您可以使用if (dateTimeObject.Kind == DateTimeKind.Local) {...}遍历标题，并使用属性选择器选择获取具有相同索引的行。

.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>的子代。

Answer 2

这是您要实现的目标吗？

$(function(){
  var th = $("table > thead > tr > th");
  var td = $("table > tbody > tr > td");

  $('thead tr').each(function(th_index,th_item) {
    var index = $(th_item).attr("data-th-index");
    var row = $('tbody tr[data-td-index="'+index+'"]');
    row.each(function(td_index,td_item){
      $(th_item).after(td_item);
    });
  });
});

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

Answer 3

1. 在所有$.each上使用TD
2. 如果index是偶数，则首先添加th（头1）
3. 如果index是奇数，则加第二个th（标题2）
4. 追加字符串并创建新表

var new_table_string="";
$.each($("table tbody tr td"), function (index,value){
    console.log(value);
    var tdval= $(this).html()
    new_table_string += "<tr><th>" + $("table thead tr th").eq(index%2).html() + "</th></tr><tr><td>" + tdval + "</td></tr>";
});
//$("table").empty();
$(".table2").append(new_table_string);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Before:
<table class="table table-hover" border="1">
  <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 3</td>
      <td>Content 4</td>
    </tr>
    <tr>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
    <tr>
      <td>Content 7</td>
      <td>Content 8</td>
    </tr>
  </tbody>
</table>
After:
<table class="table2" border="1"></table>