将表行移动到新表并添加属性

Question

我有两个表，我希望通过使用jQuery移动第二个表中的表行来合并到一个表中。

• 应在.mod之前添加表格行。
• 应删除第二张表。
• 另请注意，第一个表有5列，而第二个表只有两个，所以我想对第一个td使用2的colspan，为第二个td使用3的colspan

两张桌子

<!-- First table which should have table rows added -->
<table class="shop_table cart" cellspacing="0">
   <tbody>
        <tr class="cart_item cart_item">
            <td class="product-thumbnail">
                ...
            </td>
            <td class="product-name">
                ...
            </td>
            <td class="product-quantity">
                ...
            </td>
            <td class="product-price">
                ..
            </td>
            <td class="product-remove">
                ...                           
            </td>
        </tr>

        <tr class="mod">
            <td colspan="2">
                ...
            </td>
            <td colspan="3">
                ...
            </td>
        </tr>
    </tbody>
</table>

<!-- Second table which should be removed and table rows moved to first table -->
<div class="cart_totals">
    <table cellspacing="0">
        <tbody>
            <tr class="cart-subtotal">
                <th>
                    ...
                </th>
                <td>
                    ...
                </td>
            </tr>
            <tr class="order-total">
                <th>
                    ...
                </th>
                <td>
                    ...
                </td>
            </tr>
        </tbody>
    </table>
</div>

我想要的（一张桌子）

<table class="shop_table cart" cellspacing="0">
   <tbody>
        <tr class="cart_item cart_item">
            <td class="product-thumbnail">
                ...
            </td>
            <td class="product-name">
                ...
            </td>
            <td class="product-quantity">
                ...
            </td>
            <td class="product-price">
                ..
            </td>
            <td class="product-remove">
                ...                           
            </td>
        </tr>

        <!-- These two table rows has meen moved to this table -->
        <tr class="cart-subtotal">
            <th>
                ...
            </th>
            <td>
                ...
            </td>
        </tr>
        <tr class="order-total">
            <th>
                ...
            </th>
            <td>
                ...
            </td>
        </tr>

        <tr class="mod">
            <td colspan="2">
                ...
            </td>
            <td colspan="3">
                ...
            </td>
        </tr>
    </tbody>
</table>

的jQuery

我尝试了以下代码，但没有添加colspan。此外，我确信有更简洁的方法来做到这一点......

jQuery(document).ready(function() {

    var rows = jQuery('.cart_totals table tbody').contents();
    jQuery('.body-class-woocommerce-cart .shop_table tbody .mod').before(rows);
    jQuery('.cart-subtotal th, .order-total th').attr('colspan','2');
    jQuery('.cart-subtotal td, .order-total td').attr('colspan','3');

});

修改：在我将jquery更改为jQuery后，上述代码现在可以使用了。但这样做有“更清洁”的方法吗？

Answer 1

您的jQuery代码适合我。我认为这是一个错误

$('.cart-subtotal td').attr('colspan','2');

应该是

$('.cart-subtotal th').attr('colspan','2');