Question

我有一张表，当你点击一条记录时会打开第二层，让用户有这种感觉深入研究，现在它只适用于一个孩子＆＃34;或者第二级，但我想知道的是添加第三级，所以当我点击我小提琴上出现的任何绿色选项时，会出现一个新级别。

这是jquery代码

$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
    $('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})

$('table.drillDown').each(function() {

    var $table = $(this);
    $table.find('.parent').click(function() {
        console.log( "*****Click on Parent" );
        $(this).nextUntil('.parent').toggle("fast"); 

    });

    var $childRows = $table.find('tbody tr').not('.parent').hide();
    $table.find('button.hide').click(function() {
        $childRows.hide();

    });

    $table.find('button.show').click(function() {
        console.log("*****Click on Child");
        $childRows.filter('.child').show();
    });

    $table.find('tr.child').click(function(){
        $(this).nextUntil('.child').show()
    });

});

https://jsfiddle.net/ny6qcxtd/

感谢您的帮助！

Answer 1

我创建了一个名为孙子的第三级：D

我更新了这段代码：

        $table.find('.parent').click(function() {
            console.log( "*****Click on Parent" );
            $(this).nextUntil('.parent', ".child").toggle("fast"); 

        });

        $table.find('.child').click(function() {
            console.log( "*****Click on child" );
            $(this).nextUntil('.child', ".grandson").toggle("fast"); 

        });

您可以点击第一个父母和第一个孩子来查看孙子。

看：https://jsfiddle.net/ny6qcxtd/1/

Answer 2

这是一种可以应用于任意数量的子级别的不同方法。我正在使用data属性为每个tr提供级别。试试下面的内容：

$('table.drillDown').each(function() {
    var $table = $(this),
        $rows  = $table.find('tbody tr');

    // Hide non-parents
    $rows.not('.parent').hide();
    // On click on a row, toggle the sublevel
    $rows.on('click', toggleSublevel);

    function toggleSublevel()
    {
        // Get the sublevel of the current row
        var sublevel = parseInt($(this).data('level'), 10) + 1;
        //Get the next row
        $next = $(this).next();
        // While there is a "next" element and its level is greater or equal 
        while($next.length && $next.data('level') >= sublevel)
        {
            // If it's equal, toggle it
            if($next.data('level') == sublevel) $next.toggle();
            // If it's greater, hide it
            else $next.hide();
            // Go to the next one
            $next = $next.next();
        }
    }
});

tbody tr{ cursor: pointer; }
thead tr{
    text-align: center;
    background: #eceded;
}
td{ padding: .2em .5em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="drillDown">
    <thead>
        <tr>
            <th>Some column title</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parent" data-level="0"> <td>Parent category #1</td> </tr> 
            <tr data-level="1"> <td>Subcategory 1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.1.2</td> </tr>
            <tr data-level="1"> <td>Subcategory 1.2</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 1.2.2</td> </tr>
        <tr class="parent" data-level="0"> <td>Parent category #2</td> </tr> 
            <tr data-level="1"> <td>Subcategory 2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.1.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.1.2</td> </tr>
            <tr data-level="1"> <td>Subcategory 2.2</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.2.1</td> </tr>
                <tr data-level="2"> <td>Subcategory 2.2.2</td> </tr>
    </tbody>
</table>

添加第二个子jquery切换功能

2 个答案: