Cross filtering Table data

2020-07-31 03:06发布

问题:

I am filtering my TableA rows based on check-boxes, now I want to filter them using TableB select-able rows as well, so filtering will be done using Checkboxes + TableB, at the moment it's just checkboxes.

Here is the code,

<div class="someRow" style="width: 100%">
    <asp:CheckBox ID="Open" runat="server" ClientIDMode="Static" Checked="true" onclick="RMToggle(this)" />
    <asp:CheckBox ID="New" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
    <asp:CheckBox ID="Closed" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
    <asp:CheckBox ID="Rejected" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
</div>
<table id="tableA" class="dmctable">
    <tr data-id="Open" fid="1"></tr>
    <tr data-id="Rejected" fid="2"></tr>
    <tr data-id="New" fid="1"></tr>
    <tr data-id="Open" fid="3"></tr>
    <tr data-id="Closed" fid="2"></tr>
    <tr data-id="Open" fid="2"></tr>
    <tr data-id="New" fid="1"></tr>
    <tr data-id="Open" fid="3"></tr>
</table>
<table id="tableB" class="dmctable2">
    <tr data-fid="1" Class="selected"></tr>
    <tr data-fid="2"></tr>
    <tr data-fid="3" Class="selected"></tr>
</table>

JS

function RMToggle( elm ) { // elm = element
    var ischecked = elm.checked,
        $target = $('#table1 tr[data-id="' + elm.id + '"]');
    if( ischecked ) {
        $target.show();  // HERE how can I check if tr's FID is visible in tableB or not
    }
    else {
        $target.hide();
    }
}

Question

How can I filter rows in TableA based on checkboxes and rows in TableB.

I can check in table b if a row is selected or not by this,

if ($("#tableB tr[data-fid='1']").children(".selected").length > 0)

But how can I put it in if(isChecked) ?

Update

I am able to get ID's of TableB's selected rows, using this code,

$("#tableB tr:has(.New.selected)").map(function(){return $(this).data("fid");}).get();

Now my logic is,

function RMToggle( elm ) {
        var wantedFIDs = $("#tableB tr:has(.New.selected)").map(function(){return $(this).data("fid");}).get();
        var ischecked = elm.checked,
            $target = $('#table1 tr[data-id="' + elm.id + '"]');
        if( ischecked ) {
        // Here I want only rows in $target where data-fid = wantedFIDs
        $target.show();
    }
    else {
        $target.hide();
    }
}

回答1:

Try this:

 $target= $("[data-id='" + wantedFIDs.split(",").join("'],[data-id='") + "']")


回答2:

I ended up with this code,

function RMToggle(elm) {

    $target = $('#tableA tr[data-id="' + elm.id + '"]').filter(function () {
        var rowsFilter = $("#tableB tr .New.selected").parent().map(function () {
            return $(this).data("fid");
        }).get();

        return rowsFilter.indexOf($(this).data("fid")) >= 0;
    });

    if (elm.checked) { $target.show(); }
    else { $target.hide(); }
}


标签: jquery