jquery - 如何将表格行列表排队并在 jQuery 中执行 slideUp() 或 slideDown()？

Question

假设我有一个 50 行的表。我在该表中有父/子关系。我正在尝试单击父行并展开/折叠所有子行。我有这个工作，但我想将一组行作为一组滑动。我该怎么做？

假设用户单击 tr 中的链接。这是用户单击行内链接时的示例函数。注意 TODO：这就是我要解决的问题。

  var row = $(this).closest("tr")

    while(true) {

       if(parseInt(row.attr("data-Level"), 10) > selectedRowLevel)
{
    // TODO: I want to put all these rows in a queue maybe and the slideUp all together, not just row by row.
    row.slideToggle();
}
else
break;

row = row.next();

}

Answer 1

您不能使用 JavaScript 上下滑动表格行。您只能显示/隐藏它们。这只是表格呈现方式的限制。

只有块级元素才能以这种方式进行动画处理。如果将行替换为 div，将单元格替换为固定宽度跨度，则可以获得动画。

http://jsfiddle.net/mblase75/WgN2N/

HTML：

<div class="tr">
    <span class="td">asdf</span>
    <span class="td">qwer</span>
    <span class="td">zxcv</span>
</div>

CSS：

.td {
    display: inline-block;
    width: 100px;
    height: 20px;
    padding: 10px;
    background: #eee;
}
.tr {
    display: block; 
}
​

Answer 2

向所有这些指定的行添加一个新类。

然后在新创建的类上执行slideUp()or 。slideDown()