使用 jQuery 过滤表行的更优雅的方法
More elegant way to filter out table rows using jQuery?
我想让我的表格过滤器更优雅。基本上,此表的底部将有链接,用于根据表中的属性隐藏和显示行。它以我想要的方式工作,但我觉得我可以使用更少的 jQuery 行来编写......有人有什么想法吗?
这是jsfiddle:http://jsfiddle.net/vC88q/1/
和代码:
<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Color Table</th>
</tr>
</thead>
<tbody>
<tr>
<td data-color="red">red</td>
</tr>
<tr>
<td data-color="white">white</td>
</tr>
<tr>
<td data-color="blue">blue</td>
</tr>
<tr>
<td data-color="bluewhite">bluewhite</td>
</tr>
<tr>
<td data-color="red">red</td>
</tr>
<tr>
<td data-color="red">red</td>
</tr>
<tr>
<td data-color="red">red</td>
</tr>
<tr>
<td data-color="blue">blue</td>
</tr>
<tr>
<td data-color="blue">blue</td>
</tr>
</tbody>
</table>
<br />
<br />
<div class="filtertable">
<a href="#" data-color="all">All</a>
<a href="#" data-color="red">Red</a>
<a href="#" data-color="white">White</a>
<a href="#" data-color="blue">Blue</a>
<a href="#" data-color="bluewhite">Blue and White</a>
</div>
<script type="text/javascript">
/*******************************************************
Here is the jquery I need help with, how can I reduce the code
I've written? Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************/
$(document).ready(function()
{
/*****************************************************************
when users clicks the "all" filter, show all the hidden table rows
*****************************************************************/
$('.filtertable a[data-color=all]').click(function() {
$('td[data-color]').parent().show();
});
/****************************************************************
when users clicks the "red" filter, hide all but red table rows
*****************************************************************/
$('.filtertable a[data-color=red]').click(function() {
$('td[data-color=red]').parent().show();
$('td[data-color=white]').parent().hide();
$('td[data-color=blue]').parent().hide();
$('td[data-color=bluewhite]').parent().hide();
});
/*****************************************************************
when users clicks the "white" filter, hide all but white table rows
****************************************************************/
$('.filtertable a[data-color=white]').click(function() {
$('td[data-color=white]').parent().show();
$('td[data-color=red]').parent().hide();
$('td[data-color=blue]').parent().hide();
$('td[data-color=bluewhite]').parent().hide();
});
/****************************************************************
when users clicks the "blue" filter, hide all but blue table rows
*****************************************************************/
$('.filtertable a[data-color=blue]').click(function() {
$('td[data-color=blue]').parent().show();
$('td[data-color=white]').parent().hide();
$('td[data-color=red]').parent().hide();
$('td[data-color=bluewhite]').parent().hide();
});
/*****************************************************************
when users clicks the "blue and white" filter, hide all but blue+white table rows
*****************************************************************/
$('.filtertable a[data-color=bluewhite]').click(function() {
$('td[data-color=bluewhite]').parent().show();
$('td[data-color=white]').parent().hide();
$('td[data-color=blue]').parent().hide();
$('td[data-color=red]').parent().hide();
});
}
);
</script>
</body>
</html>
$(document).ready(function()
{
$('.filtertable a[data-color]').click(function() {
var color = $(this).data().color;
if(color == 'all'){
$('td[data-color]').parent().show();
} else {
$('td[data-color='+ color +']').parent().show();
$('td[data-color!='+color+']').parent().hide();
}
});
}
);
我经常使用CSS做这种事情。
<table id="myTable" class="all">
<tr class="red"><td>red</td></tr>
<tr class="yellow"><td>yellow</td></tr>
<tr class="blue"><td>blue</td></tr>
<table>
<div class="controls">
<a href="#" data-color="all">All</a>
<a href="#" data-color="red">Red</a>
<a href="#" data-color="white">White</a>
<a href="#" data-color="blue">Blue</a>
</div>
然后在 JS 中
$('.controls a').on('click', function(e){
e.preventDefault();
var c= $(this).data('color');
$('#myTable')[0].className = c;
});
CSS 确定在以下情况下显示的内容:
tr { display: none; }
.all tr { display: table-row; }
.red tr.red { display: table-row; }
.blue tr.blue { display: table-row; }
.yellow tr.yellow { display: table-row; }
在JSFiddle中。
这是一个演示
$(function() {
var td = $('#colortable td');
$('.filtertable').on('click', 'a', function() {
var color = this.getAttribute('data-color');
if (color === 'all') {
td.parent().show()
} else {
td.filter('[data-color=' + color + ']').parent().show()
td.filter('[data-color!=' + color + ']').parent().hide()
}
});
});
http://jsfiddle.net/vC88q/6/
$('.filtertable a[data-color]').click(function() {
var color = $(this).data().color;
$('td[data-color=' + color + ']').parent().show();
$('td[data-color!=' + color + ']').parent().hide();
});
以下内容应替换所有代码。
$(document).ready(function() {
$('.filtertable a[data-color]').click(function() {
var $this = $(this), color = $this.data('color');
if (color !== 'all') {
$('td[data-color]').parent().hide();
}
$('td[data-color' + (color !== 'all' ? '=' + color : '') + ']').parent().show();
});
});
编辑:更新以修复"全部"链接
相关文章:
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- jQuery插件-从插件中调用公共方法
- JQuery:向多个匹配结果添加换行符的最简单方法
- 将jQuery.ech()方法转换为本地JavaScript抽象的最佳方法是什么
- 基于窗口宽度jquery的函数的替代方法是什么
- JQuery示例不起作用-“;对象没有't支持属性或方法'按钮'&”;
- 从数组中删除元素的最佳方法是:javascript/jquery
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- 有没有一种方法可以在没有文档或jQuery的情况下使用javascript解码html实体
- jquery:将动画绑定到滚动条位置的更好方法
- 当用户点击动态创建的链接时,如何调用JS方法.JQuery,ASP.NET MVC
- 在附加方法jquery validate中为特殊字符使用regex
- .keyup 方法 JQuery 上的筛选值
- $.get() 方法 JQuery 不读取任何内容 (html)
- 使用“;.css()"方法jQuery
- 将属性传递给方法jQuery和Rails
- Object[Object Object]没有方法-jQuery错误
- AJAX方法Jquery不能返回数据
- 发送值post方法jquery在php页面
- 对象不支持属性和方法.- jQuery诺基亚Lumia