Javascript 使用jQuery将同一DIV中的多个表转换为一个表

我在div中有多个具有相同列的表，我希望它们转换为一个包含该表中所有记录的表

可以用jQuery完成吗

我的HTML如下所示：

<div id="multiTabels">
    <table id="table1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Record 1</td>
            <td>Record 2</td>
        </tr>
    </table>
    <table id="table1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Record 3</td>
            <td>Record 4</td>
        </tr>
    </table>
</div>

第1栏
第2栏
记录1
记录2
第1栏
第2栏
记录3
记录4

试试这个：

$(function(){
  var $firstTable = $('#multiTabels table:first');
  $('#multiTabels table:not(:first)').each(function(){
      $firstTable.append($(this).find('tr').has('td'));
      $(this).remove();
  });
});

---

任何事情都可以通过jQuery完成

在我的JSFIDLE中有一件非常重要的事情需要指出：我正在使用

thead

和

tbody

标记。这对于分隔行非常重要，是HTML中向前迈出的语义一步。如果您在dev控制台中检查表，您会注意到大多数浏览器都会在表中的所有

tr

元素周围自动添加

tbody

，因此现在开始这样做很好

//这会将钩子绑定到文档。
//如果id为“cruch”的元素发生任何“click”事件，将触发此事件。
//即使crunch被删除，此事件仍将持续，并且是好的
//用于绑定到当时可能不存在的元素时。
$（文档）.on（'click'，“#crunch”，函数（事件）{
//找到我们的集装箱。
var$multiTables=$（“#multiTables”），
//在我们的容器中查找所有表。
$tables=$multiTables.children（“表”），
//从第一个表之后的所有表中，查找元素中的所有元素。
$rows=$tables.not（“：first”）.children（“tbody”）.children（“tr”）；
//将这些行附加到第一个表的tbody。
$tables.first（）.children（“tbody”）.append（$rows）；
//移除其他表。
$tables.not（“：first”）.remove（）；
//禁用此按钮。
$（此）.prop（'disabled'，true）；
} );

试试这个：

$(document).ready(function (){
 $("#multiTabels table tr").each(function(){
   $("#newTable").append($(this)); //append to any new table
 });
});

---

是的，可以使用jQueryuse

$firstTable.append（$（this.find（$tr:not（th））如果您不想将其他表的表头传递到第一个表中。@MoshMage，是的，您是对的。我已经更新了我的答案。谢谢你指出这个问题。这可能不是问题，可能是他也想把
th
s也放进去，我只是指出了，因为他也可能没有：）@MoshMage，但如果从逻辑上考虑，如果所有表的标题都相同，OP在一个表中对多个
th
会做什么。但是让OP来决定，他希望他可以修改选择器：）谢谢@BhushanKawadkar的回答。它工作得很好。
$(document).ready(function (){
 $("#multiTabels table tr").each(function(){
   $("#newTable").append($(this)); //append to any new table
 });
});