Filter on HTML table using jQuery

Question

I am adding some check box filters on a HTML table, based on whether a check box is checked or not, and I am toggling rows. Is there anyway I could improve this code? There is no issue with it at the moment I could think of e.g. performance wise, but maybe someone could help me with decreasing number of lines.

HTML

<div id="RMbody" class="panel">
        <div class="someRow" style="width: 100%">
                <asp:CheckBox ID="cbIncludeOpen" runat="server" ClientIDMode="Static" Checked="true" onclick="RMToggle()" />
                <asp:CheckBox ID="cbIncludeNew" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
                <asp:CheckBox ID="cbIncludeClosed" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
                <asp:CheckBox ID="cbIncludeRejected" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
            </div>
    <table id="table1" class="dmctable">
        <tr data-id="Open"></tr>
        <tr data-id="Rejected"></tr>
        <tr data-id="New"></tr>
        <tr data-id="Open"></tr>
        <tr data-id="Closed"></tr>
        <tr data-id="Open"></tr>
        <tr data-id="New"></tr>
        <tr data-id="Open"></tr>
    </table>
</div>

JS

function RMToggle() {
    var o = $("#cbIncludeOpen").is(':checked');
    var n = $("#cbIncludeNew").is(':checked');
    var c = $("#cbIncludeClosed").is(':checked');
    var r = $("#cbIncludeRejected").is(':checked');

    if (o) { $('#table1 tr[data-id="Open"]').show(); }
    else { $('#table1 tr[data-id="Open"]').hide(); }

    if (n) { $('#table1 tr[data-id="New"]').show(); }
    else { $('#table1 tr[data-id="New"]').hide(); }

    if (c) { $('#table1 tr[data-id="Closed"]').show(); }
    else { $('#table1 tr[data-id="Closed"]').hide(); }

    if (r) { $('#table1 tr[data-id="Rejected"]').show(); }
    else { $('#table1 tr[data-id="Rejected"]').hide(); }
}

hjpotter92 · Accepted Answer · 2014-08-22 01:50:18Z

3

Since you are executing the RMToggle function whenever a checkbox is selected, extend it a little by passing in the IDs too. (I've changed the IDs as well):

<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>

Now, moving to the toggle function:

function RMToggle( elm ) { // elm = element
    var ischecked = elm.checked,
        $target = $('#table1 tr[data-id="' + elm.id + '"]');
    $target.toggle( ischecked );
}

edited Aug 22, 2014 at 1:50

answered Aug 21, 2014 at 11:28

hjpotter92

8,9211 gold badge26 silver badges50 bronze badges

\$\begingroup\$ +1 thank you, i liked the way you did it, but this going to be placed on sharepoint, sharepoint might have controls with ids open, close, rejceted etc, would that not going to affect ? \$\endgroup\$

Mathematics
– Mathematics

2014-08-21 11:38:54 +00:00
Commented Aug 21, 2014 at 11:38
\$\begingroup\$ how come you have "," after elm.checked \$\endgroup\$

Mathematics
– Mathematics

2014-08-21 11:44:36 +00:00
Commented Aug 21, 2014 at 11:44
2

\$\begingroup\$ You can shorten it a bit more by using $target.toggle(ischecked) \$\endgroup\$

lebolo
– lebolo

2014-08-21 20:44:43 +00:00
Commented Aug 21, 2014 at 20:44
\$\begingroup\$ @CustomizedName If the IDs can't be changed, you can use string.replace function on the passed ID: 'cbIncludeOpen'.replace( 'cbInclude', '' ) and use it. \$\endgroup\$

hjpotter92
– hjpotter92

2014-08-22 01:55:30 +00:00
Commented Aug 22, 2014 at 1:55

Add a comment |

Stack Exchange Network

Filter on HTML table using jQuery

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Filter on HTML table using jQuery

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions