如何根据复选框单击展开和关闭 tr

Question

我在一个表中有 10 行。每行第一列（td）是（+按钮）用于扩展新的tr行。我可以通过多次单击 + 按钮来展开和关闭任何行。但我也有一个常用的复选框来一次展开和关闭所有 tr。当我分开做时，这工作正常。如果我单击复选框，它将使用代码（ $(this).click() ）单击 + 按钮

但问题是我通过单击 + 按钮扩展了一行。之后，我单击通用复选框，然后它将打开所有展开的行，但在这里它关闭了我已经打开的行。我的要求不要关闭已通过单击 + 按钮打开的行。

在展开时，我正在向我单击的当前行（tr）添加一个新类（“.shown”）。+ 按钮类名称为（“.details-control”）。

以下代码是点击时常用的复选框代码。

$('.common-checkall').on('change', function() {
    var status = this.checked; 
    $(".details-control:visible").each(function(){
        $(this).click();
    });
});

这是+按钮展开的代码

$(elemId+' tbody').on('click', 'td.details-control', function(){
    var tr = $(this).closest('tr');
    var row = royaltiesTable.row(tr);
    try {
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child(format(row.data(), tr)).show();
            tr.addClass('shown');
        }
    } catch(err) {
        console.log("");
    }
});

Answer 1

您可以在调用之前添加检查 $(this).click(); 例如

$('.common-checkall').on('change', function() {
    var status = this.checked; 
    $(".details-control:visible").each(function(){    
        if((status && !$(this).hasClass('shown')) || (!status && $(this).hasClass('shown'))) {
            $(this).click();
        }
    });
});