jQuery:通过文本或HTML5数据属性过滤表
jQuery: filtering a table by text or HTML5 data-attribute
我有一个表,它有几个列和行,带有HTML5 data-attribute
。在阅读了相当多的SO问题和答案后,我试图开发允许通过文本或data-attribute
实时搜索表的代码,但我被卡住了我已经得到了相同的代码来处理<li>
元素(请参阅此处的jsFiddle),所以我认为我的问题在于我的jQuery选择器。有人对我做错了什么有意见吗?
HTML:
<input id="search" placeholder="search" />
<table>
<tr>
<th colspan="4">
California
</th>
</tr>
<tr>
<td>Name</td>
<td>Company</td>
<td>Link</td>
<td>Notes</td>
</tr>
<tr data-state="california">
<td>Joe Smith</td>
<td>Acme</td>
<td>www.www.com</td>
<td>n/a</td>
</tr>
<tr data-state="california">
<td>Sue Smith</td>
<td>Acme</td>
<td>www.www.com</td>
<td>n/a</td>
</tr>
<tr data-state="california">
<td>Frank Jones</td>
<td>Etc</td>
<td>www.www.com</td>
<td>n/a</td>
</tr>
<tr>
<th colspan="4">
Alaska
</th>
</tr>
<tr data-state="alaska">
<td>Sue Henderson</td>
<td>Acme</td>
<td>www.com.com</td>
<td>n/a</td>
</tr>
<tr data-state="alaska">
<td>Jimmy Dean</td>
<td>Acme</td>
<td>www.com.com</td>
<td>n/a</td>
</tr>
</table>
jQuery:
$("input#search").keyup(function(){
var filter = $(this).val();
var regExPattern = "gi";
var regEx = new RegExp(filter, regExPattern);
$("table tr").each(function(){
if (
$(this).text().search(new RegExp(filter, "i")) < 0 &&
$(this).data('state').search(regEx) < 0
){
$(this).hide();
} else {
$(this).show();
}
});
});
jsfiddle:http://jsfiddle.net/Q3cvH/17/
您有3个tr
元素没有data-state
属性,您无法在其上调用.search
。
在尝试对.search
执行以下操作之前,您应该检查data-state
是否存在:
if($(this).data('state'))
演示
相关文章:
- 如何在 iframe 中创建 HTML5 数据属性
- Skrollr:操作html5数据属性
- 在 jQuery 选择器中使用 HTML5 数据属性
- 正在检查没有值的HTML5数据属性
- css3动画使用html5数据属性
- 基于 html5 数据属性值创建 JavaScript 对象是否是一种好的做法
- 如何将javascript对象或JSON存储在使用html5数据属性的html元素中
- ASP.net WebForms - 如何从代码隐藏中获取 html5 数据属性
- Html5 数据属性在 ajax 请求后未更新
- HTML5 数据属性的 jQuery 选择器
- 将 HTML5 数据属性保留在本地存储中
- 使用DOM中定义的html5数据属性创建新元素
- 如何用html5数据属性覆盖jquery插件选项
- 将html5数据属性与javascript结合使用是否风格良好
- Do html5数据属性需要一个值
- 从事件内联中获取html5数据属性
- HTML5数据属性与价值
- 未传递Rails html5数据属性
- JavaScript-HTML5数据属性
- 具有jQuery的HTML5数据属性“;这个“;