第五章（jQuery对表单、表格的操作及更多应用）（5.2 表格应用）
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刚加载完时，为表单元素绑定事件并立即出发该事件即可解决
浙公网安备 33010602011771号