Question

我一直在努力解决根据所有者切换表格的多行问题。

主排
- 组行
  - 帐户行
  - 帐户行
- 组行
  - 帐户行
  - 帐户行

我从仅显示主行开始，然后当我单击切换主行时，它仅显示组行，如果我单击一个组行，则显示任何包含的帐户行。

我可以再次关闭它们，但是如果我在仍然打开帐户行时关闭整个主行，它们将保持打开状态。

这是我到目前为止使用的方法：http://jsfiddle.net/fHKcy/

现在，我知道，我应该使用嵌套的div ..但我坚持使用旧的CMS并被要求使用表..！

我有一种模糊的感觉，我可以通过将每个“组”包裹在一个tbody中来做到这一点..嗯，可能会在晚餐后测试..

我尝试的一件事是在$('[data-owner="' + parentId +'"]').hide();

之后添加以下内容

if(accountType == 'master') {
    $('[data-owner="' + parentId +'"]').find('[data-account-level="account"]').hide();
}

但我无法让它发挥作用。

Answer 1

试试这个jsfiddle with a simple table

$(document).ready(function () {
    $(".hide").hide();
    $(".show").click(function () {
        $(this).nextUntil(".show").toggle();
    });
});

Answer 2

您可以通过向表行添加类来完成此操作。为子行提供一个依赖于其父行的类，然后在选择父行时显示子行（并隐藏先前选择的父行的任何子行）。

Answer 3

没有什么比晚上的睡眠更能帮助解决问题了。

正如我在原始帖子中所怀疑的那样 - 使用带有data-owner属性的tbody元素会起作用。

所以现在主级别'拥有'跟随它的tbody元素：

<!-- MASTER ACCOUNT -->
<tr id="test1" class="pa-dt-master-account-level" data-account-level="master">
    <td class="pa-dt-account-details">
        <a class="pa-dt-toggle" href="#">Toggle</a><br />
        Test1
    </td>
</tr>
<tbody data-owner="test1">
    <tr> // etc
</tbody>

javascript不会改变。

// Define our button for toggling
var button = $( "table.pa-dynamic-table a.pa-dt-toggle" );

button.click(function() {
    // get the parent ID
    var parentId = $(this).parents('tr').attr("id");
    // get the parent account level
    var accountType = $(this).parents('tr').attr("data-account-level");

    console.log(parentId);
    console.log(accountType);

    if ($(this).hasClass("pa-dt-toggle-active")) {
        $(this).removeClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').hide();

    } else {
        $(this).addClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').show();
    }
});

您可以在此处看到它：http://jsfiddle.net/dKpxV/2/

唯一的问题是，这种方法可能无法使用比当前更多的级别..但是它确实具有保留组级别项目的打开/关闭状态的优势。

是的，使用嵌套列表肯定会更容易。

使用jQuery以人造嵌套方式切换表行

3 个答案: