我正在尝试在半自动生成的表中在另一个下拉表行下做一个下拉表行。我搜索了一下，了解到您无法直接对表元素进行动画处理。我尝试将我的桌子包裹在div 中，动画起作用了。
我现在的问题是，我真的不知道如何在循环特定部分时继续使用该div 制作我的表格。它只是以某种方式弄乱了桌子。
<body>
<table>
<tbody>
<tr>
// HEAD OF TABLE //
</tr>
{{FOREACH}}
<tr>
// ALWAYS VISIBLE TR //
</tr>
<tr class="hidden hideable{{$i.id}}">
//CONTENTS//
</tr>
{{/FOREACH}}
</tbody>
</table>
$(document).ready(function() {
$(".btn").click(function(e){
e.preventDefault();
var tar = $('.hideable'+$(this).attr('attrib_target'));
tar.slideToggle('slow');
// tar.toggle();
});
});
我应该在哪里打开和关闭div 才能有功能？
编辑：我需要的基本上是：
表头(固定)
包含基本信息的表格行(固定)
隐藏包含更多信息的表格行(可切换)
我遇到的问题是循环，因为我需要将隐藏的表行包装在div 和表中(否则，div 会因为它们的属性而从表中弹出)。 循环不断弄乱我的不同尝试，以便能够正确制作隐藏部分的动画。
谢谢。
如果设置的高度小于内容的实际高度，则表元素的任何部分(无论是<tr>还是<tbody>)都不会隐藏溢出的内容。这就是动画不适用于表元素的原因。我建议将您的内容包装在<div>并使用 slideSwitchgle 进行动画处理。
请检查以下代码：
$(document).ready(function() {
$(".btn").click(function(e) {
e.preventDefault();
var tar = $('.hideable' + $(this).attr('data-target'));
tar.slideToggle('slow');
// tar.toggle();
});
});.hidden {
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
// HEAD OF TABLE //
</th>
</tr>
</thead>
<tbody>
<!-- {{FOREACH}} -->
<!-- FOREACH ITERATION 1 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="1">Show</button>
</td>
</tr>
<tr>
<td>
<div class="hidden hideable1">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 1 -->
<!-- FOREACH ITERATION 2 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="2">Show</button>
</td>
</tr>
<tr class="">
<td>
<div class="hidden hideable2">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 2 -->
<!-- {{/FOREACH}} -->
</tbody>
</table>