我如何将表（tr th:even 和 tr td:even 和 th:odd 和 td:odd）附加到新表

Question

首先，抱歉英语不是我的母语。

*（偶数和奇数基于索引）

我想在移动视图中实现此表。

我试过的

<table class="table">
  <tbody>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
     <th>Content 3 Head</th>
     <th>Content 4 Head</th>
    </tr>
    <tr>
     <td>Content 3</td>
     <td>Content 4</td>
    </tr>
  </tbody>
 </table>

var mobileTable = ""
$("table tbody th:even").each(function(i) {
    var tdval = $(this).html();
    console.log(thval);
    mobileTable =+ "<th>" + $('table tr td:odd') + tdval +'</th>';
});
$('table:first-child').empty();
$('.table-mobile').append(mobileTable);

Answer 1

 var x = $("#table").find("th,td"); var i = $("#table").find("tr").length; var j = x.length/i; //console.log(i , j); var newT= $("<table>").appendTo("body"); for (j1=0; j1<j;j1++){ //var temp = $("<tr>").appendTo(newT); for(var i1=0;i1<i; i1++){ var temp = $("<tr>").appendTo(newT); temp.append($(x[j1 *4+i1%2 *2+i1/2]).clone()); var temp2 = $("<tr>").appendTo(newT); temp2.append($(x[j1 *4+i1%2 *2+i1/2+2]).clone()); //console.log(j1 *4,i1%2 *2,i1/2); } } $("#table").remove();

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

Answer 2

这是作出的修正。

var mobileTable = ""
$("table tbody th").each(function(i) {
    var thval = $(this).html();
    var tdval = $('table tr td').html(); // How can i loop this through 
    mobileTable += "<tr><td>" + thval +'</td></tr><tr><td>'+ tdval + '</td><tr>';
});
$('table:first-child').empty();
$('.table-mobile').append(mobileTable);

结果（由 jQuery 触发）

Answer 3

1. 创建数组
2. 给每个 th 和 tds 单独的行
3. 将每个 th 添加到数组中的位置，例如：0,2,4,6 (index*2)
4. 将每个 td 添加到 Array 中的位置，例如：1,3,5,7 (((index+1)*2)-1)
5. 使用append数组添加到移动表。

您的最终数组变为：

[0] = th1
[1] = td1
[2] = th2
[3] = td2
...

 var tarr = []; $("table tr:even *").each(function(i) { tarr[(i*2)]="<tr><th>"+$(this).html()+"</th></tr>"; }); $("table tr:odd *").each(function(i) { tarr[((i+1)*2)-1]="<tr><td>"+$(this).html()+"</td></tr>"; }); console.log(tarr); $('table').empty(); $('.table-mobile').append(tarr);

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