Jquery选择器 – 过滤ASP.NET gridview

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

我已经编写了这个混乱的JQuery / 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(); } }); });          

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

 
 
 
 
 
header
 
header
 
header
 
header
 
 
 
 
 
data
 
data
 
Red
 
data
 
 
 
  

（这与原版相比大大简化了，希望能让它易于理解。过滤实际上也适用于原版，它只是缓慢而丑陋……）

Answer 1

减慢它的一个方面是你定义选择器的方式：

 $('.Blue input:checkbox') 

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

所以更好的选择器将是：

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

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

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