0

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

  • 主行
    • 组行
      • 帐户行
      • 帐户行
    • 组行
      • 帐户行
      • 帐户行

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

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

这是我迄今为止一直在使用的方法：http: //jsfiddle.net/fHKcy/

现在，我知道，我应该使用嵌套的 div .. 但我被旧的 CMS 困住了，并且被要求使用表格..！

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

我正在尝试的一件事是在之后添加以下内容$('[data-owner="' + parentId +'"]').hide();

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

但我就是无法让它工作。

4

3 回答 3

1

用一个简单的表试试这个 jsfiddle

$(document).ready(function () {
    $(".hide").hide();
    $(".show").click(function () {
        $(this).nextUntil(".show").toggle();
    });
});
于 2013-04-11T07:52:29.077 回答
0

没有什么比睡一觉更能帮助解决问题了。

正如我在原始帖子中所怀疑的那样 - 使用带有 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/

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

是的，使用嵌套列表肯定会容易得多..

于 2013-02-08T08:50:40.773 回答
0

您可以通过将类添加到表格行来非常简单地做到这一点。给子行一个依赖于其父行的类，然后在选择父行时仅显示子行（并隐藏先前选择的父行的任何子行）。

于 2013-02-08T01:20:03.393 回答