Question

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

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

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

这是我正在做/想要实现的目标的图像：

enter image description here

所以，我遇到的问题是如何在HTML中将“show all instances”行结构化。在父行下创建另一个表？我想到了这个并且遇到了如何用正确的产品定位“实例”的问题。

到目前为止，这是我的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

隐藏/显示特定的表行

1 个答案: