current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 2 down vote favorite

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(); }
}
share|improve this question
up vote 3 down vote accepted

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 );
}
share|improve this answer
    
+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 ? – Mathematics Aug 21 '14 at 11:38
    
how come you have "," after elm.checked – Mathematics Aug 21 '14 at 11:44
2  
You can shorten it a bit more by using $target.toggle(ischecked) – lebolo Aug 21 '14 at 20:44
    
@CustomizedName If the IDs can't be changed, you can use string.replace function on the passed ID: 'cbIncludeOpen'.replace( 'cbInclude', '' ) and use it. – hjpotter92 Aug 22 '14 at 1:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.