5.2.1 表格变色
HTML
<style type="text/css"> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;} </style> </head> <body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td>李四</td><td>男</td><td>浙江宁波</td></tr> <tr><td>王五</td><td>男</td><td>浙江宁波</td></tr> <tr><td>赵六</td><td>女</td><td>浙江宁波</td></tr> <tr><td>rain</td><td>男</td><td>浙江宁波</td></tr> <tr><td>MAXMAN</td><td>女</td><td>浙江宁波</td></tr> </tbody> </table> <script type="text/javascript"> </script> </body>
1 普通的隔行变色
首先定义2个样式:
.even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/
然后选择表格奇数和偶数分别添加样式
$(function(){ $("tr:odd").addClass("odd"); /*给奇数行添加样式*/ $("tr:even").addClass("even"); /*给偶数行添加样式*/ })
上述代码是将表头算进去的,如果需要排除表头,可以修改选择符
$(function(){ $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/ $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ })
如果需要将某行变为高亮显示,可以使用 contains 选择器实现
$("tr:contains('王五')").addClass("selected");
2 单选框控制表格行高亮
在第一列前加上一列单选框
当单击某一行后,此行被选中高亮显示,并且单选框被选中,步骤:
① 为表格行添加单击行为
② 给单击的当前行添加高亮样式,然后将它的兄弟行的高亮样式去掉,最后将当前行里的单选框设置为选中
$('tbody>tr').click(function(){ $(this) .addClass('selected') .siblings().removeClass('selected') .end() .find(':radio').attr('checked',true); })
♦ 使用end() 方法,当前对象是$(this),当进行 addClass() 操作时,对象未发生变化,当执行 siblings().removeClass()操作时,对象已经变味 $(this).siblings(),因此后面的操作都是针对这个对象的,如果需要重新返回到 $(this) 对象,就可以使用 end() 方法
.find(':radio').attr('checked',true); //操作就是: $(this).find(':radio').attr('checked',true); //而不是: $(this).siblings().find(':radio').attr('checked',true); //另外,初始化表格时候,如果默认已经有单选框被选中,那么也需要处理,代码如下 $('table :radio:checked').parent().parent().addClass('selected');
$('table :radio:checked').parent().parent().addClass('selected'); //是通过 parent() 方法逐步向父节点获取响应的元素,也可以使用 parents() 方法直接获取 $('table :radio:checked').parents("tr").addClass("selected");
如果通过 has 也可以进一步简化,表示含有选中的单选框的 <tr> 行将被高亮显示
$('<tbody>tr:has(:chcked)').addClass('selected');
完整:
<script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $('tbody>tr').click(function() { if ($(this).hasClass('selected')) { $(this) .removeClass('selected') .find(':checkbox').attr('checked',false); }else{ $(this) .addClass('selected') .find(':checkbox').attr('checked',true); } }); $('table :checkbox:checked').parents("tr").addClass('selected'); }) </script>
3 复选框控制表格行高亮
复选框控制表格与单选框不同,复选框能选择多行变色,并没有限制选择的个数,当单击某行时,如果已经高亮了,则移除高亮样式并去掉当前行复选框的选择状态,如果还没有高亮,则添加高亮样式并将当前行的复选框选中。
<table> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value=""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>李四</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td> <td>王五</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>赵六</td><td>女</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>rain</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>MAXMAN</td><td>女</td><td>浙江宁波</td></tr> </tbody> </table>
判断是否已经高亮,可以使用hasClass() 方法完成
<script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $('tbody>tr').click(function(){ if($(this).hasClass('selected')){ $(this) .removeClass('selected') .find(':checkbox').attr('checked',false); }else{ $(this) .addClass('selected') .find(':checkbox').attr('checked',true); } }); $('table :checkbox:checked').parents("tr").addClass('selected'); }) </script>
在如上设计思路不变的前提下,可以简化为:
$(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $('tbody>tr').click(function(){ // 判断当前是否选定 var hasSelected = $(this).hasClass('selected'); // 如果选中,则移出 selected 类,否则就加上 selected 类 $(this)[hasSelected?"removeClass":"addClass"]('selected') // 查找内容的 checkbox ,设置对应的属性 .find(':checkbox').attr('checked',!hasSelected); }); $('tbody>tr:has(:checked)').addClass('selected');
// 当用户刚进去页面时,也要处理已经被选中的表格行
})
5.2.2 表格展开关闭
<style type="text/css"> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} .parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;} </style> </head> <body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr class="child_row_01"><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> <tr class="child_row_02"><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr class="child_row_02"><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr> <tr class="child_row_03"><td>Rain</td><td>女</td><td>火星来客</td></tr> <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>火星来客</td></tr> </tbody> </table> </body>
$(function(){ $('tr.parent').click(function(){ // 获取所有的父行,绑定事件 $(this) .toggleClass('selected') // 添加、删除高亮显示 .siblings('.child_'+this.id).toggle(); //隐藏、显示所有的子行
// siblings() 遍历所有的子元素 }); })
点击绑定的父元素,会折叠子元素
5.2.3 表格内容筛选
<style type="text/css"> table { border:0;border-collapse:collapse;} div{font:normal 12px/17px Arial;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} .even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;} </style> </head> <body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr><td>张三</td><td>男</td><td>河北邯郸</td></tr> <tr><td>王五</td><td>女</td><td>火星来客</td></tr> <tr><td>Rain</td><td>女</td><td>火星来客</td></tr> <tr><td>MAXMAN</td><td>女</td><td>火星来客</td></tr> <tr><td>王五</td><td>男</td><td>中国南京</td></tr> <tr><td>赵四</td><td>男</td><td>中国南京</td></tr> <tr><td>赵四</td><td>女</td><td>中国南京</td></tr> </tbody> </table>
$(function(){ $("table tbody tr") .hide() .filter(":contains(五)") .show(); })
在表格上添加一个文本框,用于根据用户输入的内容来筛选表格内容,然后为文本框绑定 keyup 事件:
<body> <div> <br/> 筛选 <input type="" id="filterName" name=""> <br/><br/> </div> <table> <!--在表格上面加一个搜索框-->
$(function(){ $("#filterName").keyup(function(){ //keyup 当按钮被松开时触发 $("table tbody tr").hide() .filter(":contains('"+($(this).val())+"')") .show(); // :contains 选择器选取包含指定字符串的元素 // filter() 过滤器 }).keyup(); })
♥ 为避免刷新页面出现表单元素输入的值还是,但是表格内容已经被刷新的情况,需要在DOM刚加载完时,为表单元素绑定事件并立即出发该事件即可解决