javascript - 在 javascript 中动态地将 HTML 表分解为两个表

Question

我在 asp.net 中使用一个用户控件，我在其中从代码隐藏创建一个 html 表。初始结构如下。

 <table>
  <tr>
        <td>Property1</td>
        <td>Property2</td>
        <td>Property3</td>
        <td>Property4</td>
  </tr>
  <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
  </tr>
</table>

我的问题是我想根据将要放置的容器的大小来重组它 [因为它是一个用户控件]。例如，如果每个单元格的宽度为 20px，容器宽度为 40px，则结构将如下所示；

    <table>
  <tr>
        <td>Property1</td>
        <td>Property2</td>
  </tr>
  <tr>
        <td>Value1</td>
        <td>Value2</td>
  </tr>
   </table>



<table>
   <tr>
        <td>Property3</td>
        <td>Property4</td>
  </tr>

  <tr>
        <td>Value3</td>
        <td>Value4</td>
  </tr>
</table>

Answer 1

感谢@user2167382 的建议。 最后我解决了它，虽然我不得不使用 jquery。 下面是我的 html。

    <table id="sourceT">
<tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
</tr>
<tr>
    <td>Col 1 - value</td>
    <td>Col 2 - value</td>
    <td>Col 3 - value</td>
</tr>
 </table>



 <table id="targetT">
 </table>

这是 jquery 逻辑。

var $target = $("#targetT");

$("#sourceT tr").each(function() {
var $tds = $(this).children(),
    $row = $("<tr></tr>");
    var i=1;
 while(i<3)
 {
  alert(i)  ;  $row.append($tds.eq(i).clone()).appendTo($target);
    i++;

 }
});

希望它能帮助到其他人。