使用jQuery向按钮添加操作

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小提琴

Answer 2

也许你可以使用这样的东西：$(".classOfButton").click(function() {                 $(".classOfWhatYouWantToExpand").fadeToggle("slow", "linear")             });因此，在单击按钮时使用jQuery .fadeToggle（）函数。只需注意你的目标是什么，并适当地使用类或id。fadeToggle（） jQuery .click （）

Answer 3

$("#target").click(function() {     alert("click event"); });$("#target").submit(function() {     alert("submit event"); });

Answer 4

只需绑定按钮单击功能，请参阅下面的代码。为了exa。$( "#dataTable tbody tr" ).on( "click", function() {   console.log( $( this ).text() );});为你的代码看起来像，$( "#target" ).on( "click", function() {  console.log( $( this ).text() );});