Question

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

Answer 1

试试这个：

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

<强> JSfiddle Demo

Answer 2

任何事情都可以用jQuery完成。

我的jsFiddle指出了一件非常重要的事情：我正在使用thead和tbody标签。这对于隔离行非常重要，并且是HTML中的语义步骤。如果您在开发控制台中检查表格，您会发现大多数浏览器会自动在表格中的所有tbody元素周围添加tr，因此最好开始这样做。

https://jsfiddle.net/wumztk45/

// This binds a hook to the document.
// If any 'click' events happen to an element with the id "cruch" this event fires.
// This event will persist even when crunch is deleted, and is good
// for when binding to elements that may not exist at the time.
$(document).on('click', "#crunch", function(event) {
        // Find our container.
    var $multiTables = $("#multiTables"),
        // Find all tables in our container.
        $tables      = $multiTables.children("table"),
        // From all tables after the first, find all <tr> elements within <tbody> elements.
        $rows        = $tables.not(":first").children("tbody").children("tr");

        // Append these rows to the first table's tbody.
        $tables.first().children("tbody").append( $rows );
        // Remove the other tables.
        $tables.not(":first").remove();

        // Disable this button.
        $(this).prop( 'disabled', true );
} );

Answer 3

试试这个：

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

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

3 个答案: