javascript - 我如何附加表格(tr th : even and tr td:even and th:odd and td:odd) to a new table

Question

首先，抱歉英语不是我的第一语言。

*(偶数和奇数是根据索引)

我想在移动 View 中实现此表。

我尝试过的

<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>