Jquery 隐藏/显示特定表行
我需要能够隐藏表中默认的特定行 基本上，这是一个电子商务网站中的“我的篮子”页面，这里的想法是能够显示多个相同产品的所有实例 示例：假设您选择数量为3只山羊-在显示的产品下面有一个链接，上面写着“显示所有实例”。这意味着，如果要单击锚点，则显示总共3只山羊的每个实例 下面是我正在做/试图实现的一幅图像： 因此，我面临的问题是如何在结构上将HTML中的“ShowAll instances”行放在一起。是否在父行下创建另一个表？我想到了这一点，并开始讨论如何用正确的产品定位“实例” 以下是我迄今为止的HTML代码-此代码仅显示了我为实现每个产品行所做的工作：Jquery 隐藏/显示特定表行,jquery,html,css,Jquery,Html,Css,我需要能够隐藏表中默认的特定行 基本上，这是一个电子商务网站中的“我的篮子”页面，这里的想法是能够显示多个相同产品的所有实例 示例：假设您选择数量为3只山羊-在显示的产品下面有一个链接，上面写着“显示所有实例”。这意味着，如果要单击锚点，则显示总共3只山羊的每个实例 下面是我正在做/试图实现的一幅图像： 因此，我面临的问题是如何在结构上将HTML中的“ShowAll instances”行放在一起。是否在父行下创建另一个表？我想到了这一点，并开始讨论如何用正确的产品定位“实例” 以下是我迄今为
<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"> </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"> </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>
微笑礼物
数量
频率
卡片类型
编辑/删除
小计
世界粮食计划署
对于HTML
，只需为每个条目添加更多行，然后需要在java脚本中进行一些调整以隐藏和显示这些行。我更喜欢它，因为它优雅地处理DOM
这里是完成任务的简单方法（仅发布javascript）
var link=$（''）；
$（'tr.main'）.hide（）.first（）.find（'.product'）.parent（）.remove（'a'）.append（link）；
$（'tr.main'）.first（）.show（）；
$（'table'）。在（'click'，'a.show-instances'，function（）上{
var selectedClass=$（this.nexist（'tr.main'）.attr（'class'）.split（''）；
$（'.+selectedClass[1]）。不（':has（“a.show-instances”））。切换（）；
返回false；
});
查看正在工作的在html代码中添加更多详细信息，您希望在其中放置按钮以切换行。其思想就是将所有具有相同产品的行与类设置为产品的id。然后单击切换按钮时，使用$（'.id1'）.toggle（）；“因此，我面临的问题是如何在HTML中结构化地将“show all instances”行放在一起。”-那么您是在询问HTML结构，还是在询问如何使用jQuery进行隐藏和显示？（或者两者都有？）主要是HTML结构——如果你能帮忙的话，jquery就太好了。@ThaiTran为你更新了HTML注释，为这个人增加了一堆！我现在唯一要问的问题是，如何使“show instances”向下滑动而不是show？我尝试将.toggle替换为.slideToggle，但效果不太好。建议？@filt好的，这是块级元素的问题，试试看。但是你需要在路线上下功夫。
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;
});