<table>
<tbody>
for loop here
<tr>
<td>Item X Attribute 1</td>
<td>Item X Attribute 2</td>
<td><button name="test" onclick="display_variants()">Hide my kids</button></td>
</tr>
<tr>
<tbody class="variants_info">
<tr>
<td>Item X Variant 1</td>
<td>Item X Variant 2</td>
</tr>
</tbody>
</tr>
endfor loop
</tbody>
</table>
所以结构重复Y次.
我试图制作一个隐藏所选列的tbody.variants的脚本.
我到目前为止是这样的：
<script>
function display_variant(){
if($('.variants_info').is(":visible")){
$('.variants_info').hide();
}
else{
$('.variants_info').show();
}
}
</script>
但是这隐藏了所有行中的变体.
有没有办法选择特定行的孩子？还可以从隐藏的tbody.variants开始吗？ (当我访问页面时开始).
更新：
我设法改变了结构：
<table>
for loop
<tbody>
<tr>
<td>image for el 1</td>
<td>attr for el 1</td>
<td><button type='button' name='test'>Click Me</button></td>
</tr>
for loop
<tr class='variants_info'>
<td>variant1 for el 1</td>
<td>variant2 for el 1</td>
</tr>
endfor
</tbody>
endfor
</table>
更新2：实际代码是这样的：
<table class="pure-table pure-table-bordered">
<tbody>
{% for product in collection.products %}
{% if product.available %}
<tr class="{% cycle 'pure-table-odd','' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<script>
$("td button").click(function(){
$(this).closest('tr').next().toggle();
})
</script>
我仍然无法让JS工作.. = /当前只是隐藏第一个变体(而不是所有的变体为点击的按钮)
解决方法
<tr class="product {% cycle 'pure-table-odd','' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
您不会将该类添加到具有变体的行.
然后在JavaScript中使用nextUntil方法来匹配所有下一个变体行(没有“product”类),直到但不包括下一个产品行,并将toggle()方法应用于所有这些行：
$("td button").click(function(){
$(this).closest('tr').nextUntil('.product').toggle();
});
替代结构1
您可以创建嵌套表,而不是单个表,每个表包含变体.看起来有点像这样：
<table class="pure-table pure-table-bordered">
<tbody>
{% for product in collection.products %}
{% if product.available %}
<tr class="{% cycle 'pure-table-odd','' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
<tr>
<table class="some other class specific for variants">
<tbody>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
这具有优点和缺点.主要缺点是这些子表的列与主表中的列不对齐.但这取决于你想要什么…
然后,JavaScript代码必须像原来的那样：
$("td button").click(function(){
$(this).closest('tr').next().toggle();
});
替代结构2
您还可以使用tbody标签来包装每个“部分”(由一个产品行和属于它的变体行组成).虽然不太常见,但这是允许的,如MDN所述：
Note that unlike the
<thead>,<tfoot>,and<caption>elements however,multiple<tbody>elements are permitted (if consecutive),allowing the data-rows in long tables to be divided into different sections,each separately formatted as needed.
这与您的原始HTML不同,您将tbody元素作为tr元素的子代,这是无效的HTML.
看起来像这样：
<table class="pure-table pure-table-bordered">
{% for product in collection.products %}
{% if product.available %}
<tbody>
<tr class="{% cycle 'pure-table-odd','' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}"
alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
{% endfor %}
</table>
然后,您可以使用nextAll()方法隐藏变体行,因为它们由下一个产品行的tbody包装器分隔：
$("td button").click(function(){
$(this).closest('tr').nextAll().toggle();
});
最初隐藏变体行
如果要首先隐藏所有变体,请将以下属性添加到HTML代码中的这些行：
<tr style="display:hidden">
你当然不会这样做的产品行.此外,您可能需要为此定义一个CSS类(例如tr.hidden {display：hidden;}而不是使用样式.
