javascript - 使用 jQuery 向按钮添加 Action

Question

我有一个表，它显示不同级别的数据(父级、子级、孙子)，当我单击父级时，它会显示与子级相关的新行，如果我单击子级，它会显示第三级作为孙子更多行。

我想做的是在每条记录上添加一个带有“+”符号的按钮，这样当我点击它时，我会看到第二级并将该按钮从父级切换到另一个带有“-”符号的按钮，为了模拟展开和折叠功能，我也想为子级别执行此操作。

现在，如果我单击一行，列就会展开或折叠，但如果我单击要添加的按钮，我想这样做。

这是我的代码:

    $('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();

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

})


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

        var $table = $(this);
        $table.find('.parent').dblclick(function() {
            console.log( "*****Click on Parent" );
            $(this).nextUntil('.parent', ".child").toggle("fast"); 
            $(this).nextUntil('.parent', ".grandson").hide("fast");
        });

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

        });

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

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

    });

还有我对完整示例的摆弄

https://jsfiddle.net/ny6qcxtd/2/

谢谢!

Answer 1

changed with following fiddle

fiddle