jquery - 隐藏/显示特定表格行

Question

我需要能够隐藏表格中默认的特定行。

基本上，这是电子商务网站中的“我的购物篮”页面，这里的想法是能够显示不止一个相同产品的所有实例。

示例:假设您选择数量为 3 只山羊 - 在显示的产品下方有一个链接，上面写着“显示所有实例”。这意味着如果您单击 anchor ，则显示您想要的总共 3 只山羊的每个实例。

这是我正在做/试图实现的目标的图像:

所以，我遇到的问题是如何在结构上将“显示所有实例”行放在 HTML 中。在父行下创建另一个表？我想到了这一点，并开始思考如何使用正确的产品定位“实例”的问题。

到目前为止，这是我的 HTML 代码 - 此代码仅显示我为实现每个产品行所做的工作:

<div class="item-section">
        <span class="section-heading">Smiles Gifts</span>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-bottom: 1px dotted #666666;padding: 0 0 5px 0;" >
            <tr>
                <th class="col-1">&nbsp;</th>
                <th class="col-2">Qty</th>
                <th class="col-3">Frequency</th>
                <th class="col-4">Card Type</th>
                <th class="col-5">Edit/Remove</th>
                <th class="col-6">Subtotal</th>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td class="item col-1 clearfix">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <img src="images/cart_dummy_image.jpg" alt="" />
                            </td>
                            <td>
                                <span class="product">World Food Programme</span>
                                <!-- LINK TO SHOW OTHER INSTANCES -->
                                <a class="show-instances" href="#">Show all instances</a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="col-2"">1</td>
                <td class="col-3">One Off</td>
                <td class="col-4">&nbsp;</td>
                <td class="col-5">
                    <a href="#" class="blue-anchor">Edit</a>
                    <a href="#">Remove</a>
                </td>
                <td class="col-6">$45.00</td>
            </tr>
</div>

希望所提供的信息足够详细，但如果有任何问题，请告诉我，我会尽力提供帮助!

Answer 1

对于 HTML 只需为每个条目添加更多行，然后您需要在 java 脚本中进行一些调整以隐藏和显示这些行。我更喜欢 jQuery因为它可以优雅地处理 DOM。

这里是完成任务的简单方法，(仅发布 javascript)

var link = $('<a class="show-instances" href="#">Show all instances</a>');
$('tr.main').hide().first().find('.product').parent().remove('a').append(link);
$('tr.main').first().show();

$('table').on('click', 'a.show-instances', function() {
    var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
    $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
    return false;
});​

看看工作 DEMO