Jquery 选择器 - 过滤 ASP.NET gridview

Question

我有一个 gridview 和一些复选框控件，我的想法是只显示带有相应复选框的行。

我已经编写了这些 JQuery/javascript 的烂摊子，它实际上确实可以工作，但我的眼睛被冒犯了，而且执行得非常糟糕。是否有更简单和/或更快的方法来使用复选框名称按列文本进行过滤？

<script type="text/javascript">
    $(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();
          }
      });
  });
</script>

<span id="filtercheckboxes">
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
        CssClass="RedLabel" />
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
        CssClass="GreenLabel" />
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
        CssClass="BlueLabel" />
</span>

ASP.NET gridview 的 HTML 输出如下所示：

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
    <table summary="" class="EntriesGrid">
        <thead>
            <tr class="headerrow">
                <th scope="col">header</th>
                <th scope="col">header</th>
                <th class="Colour" scope="col">header</th>
                <th scope="col">header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td class="Colour">Red</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>
</div>

（这在原来的基础上被大大简化了，希望让它更容易理解。过滤在原来的情况下也确实有效，它只是缓慢而丑陋......）

Answer 1

减慢速度的一件事是您定义选择器的方式：

$('.Blue input:checkbox')

因为您是按类搜索 jQuery 几乎必须先浏览页面上的每个项目。但是，如果您指定一个 ID，那么 jQuery 可以跳过大部分页面并专注于特定的 DOM 元素。

所以更好的选择器应该是：

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox')

当然，这有获取控件 ID 的问题，但如果 JavaScript 在同一页面上，您可以像这样使用：

$('#<% GridView1.ClientID %> .Blue input:checkbox')