title: Jquery selectors - filtering ASP.NET gridview
body: <p>I've got a gridview and some checkbox controls, with the idea that only the rows with the corresponding checkboxes are shown.</p>
  
  <p>I've composed this mess of JQuery/javascript which actually does work but offends my eyes, and performs terribly.  Is there are a simpler and/or faster way of using the checkbox names to filter by the column text?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $('.Red input:checkbox').click(function(event) {
            if (this.checked) {
                jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show();
            }
            if (!this.checked) {
                jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide();
            }
        });
        $('.Green input:checkbox').click(function(event) {
            if (this.checked) {
                jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show();
            }
            if (!this.checked) {
                jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide();
            }
        });
        $('.Blue input:checkbox').click(function(event) {
            if (this.checked) {
                jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show();
            }
            if (!this.checked) {
                jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide();
            }
        });
    });
  &lt;/script&gt;
  
  &lt;span id="filtercheckboxes"&gt;
      &lt;asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" /&gt;
      &lt;asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
          CssClass="RedLabel" /&gt;
      &lt;asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" /&gt;
      &lt;asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
          CssClass="GreenLabel" /&gt;
      &lt;asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" /&gt;
      &lt;asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
          CssClass="BlueLabel" /&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The HTML output from the ASP.NET gridview looks like this:</p>
  
  <pre><code>&lt;div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1"&gt;
      &lt;table summary="" class="EntriesGrid"&gt;
          &lt;thead&gt;
              &lt;tr class="headerrow"&gt;
                  &lt;th scope="col"&gt;header&lt;/th&gt;
                  &lt;th scope="col"&gt;header&lt;/th&gt;
                  &lt;th class="Colour" scope="col"&gt;header&lt;/th&gt;
                  &lt;th scope="col"&gt;header&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;data&lt;/td&gt;
                  &lt;td&gt;data&lt;/td&gt;
                  &lt;td class="Colour"&gt;Red&lt;/td&gt;
                  &lt;td&gt;data&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(This is dramatically simplified from the original, in the hope of making it easy to understand.  The filtering does actually work in the original too, it's just slow and ugly...)</p>