<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="keywords" content="关键词1，关键词2，关键词3等等"/> <title>jQuery表格应用</title> <style type="text/css"> .tabWrap{width:400px; height:auto; border:1px solid #000; margin:10px auto;} table{width:100%; height:auto;} tr{width:100%; height:40px; line-height:40px; text-align:center;} thead{background:#d8d8d8; border-bottom:1px solid #000;} .even{background:#999;} .odd{pink;} < /span> .selected{background:yellow;} </style> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //普通的隔行变色效果,且排除表头 $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); //使用contains选择器将某一行变为高亮显示 $("tr:contains('王五')").addClass("selected"); //单选框控制表格行高亮 $("#rad>tr").click(function(){ $(this).addClass("selected") .siblings().removeClass("selected") .end() //如果需要重新返回到$(this)对象就可以用end()方法 .find(":radio").prop("checked",true); }) $("input:checked").parents("tr").addClass("selected");//默认选中行高亮 //复选框控制表格高亮 $("#che>tr").click(function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected") .find(":checkbox").prop("checked",false); }else{ $(this).addClass("selected") .find(":checkbox").attr("checked",true); } }) //表格展开关闭 $("tr.parent").click(function(){//获取所谓的父行，并给点击事件 $(this) .toggleClass("selected") //添加或删除高亮 .siblings(".child_"+this.id).toggle(); //隐藏或显示所谓的字行 //".child_"+this.id这样写必须命名符合规则，child_后面的跟id一样 }) //表格内容帅选 利用contains选择器和filter()方法 $("#filterName").keyup(function(){ $("tbody tr").hide() .filter(":contains('"+($(this).val())+"')").show(); }) }) </script> </head> <body> <div style="margin:0 auto; width:400px; height:auto;"> jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，以及表格内容帅选等效果。<br /> 帅选： <input type="text" id="filterName" /> </div> <div class="tabWrap"> <table style="border-collapse:collapse;"> <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="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>陈十</td><td>女</td><td>海南三亚</td></tr> <tr class="child_row_03"><td>谢天</td><td>女</td><td>湖南郴州</td></tr> <tr class="child_row_03"><td>邓九</td><td>男</td><td>北京海淀</td></tr> </tbody> </table> </div> <div class="tabWrap"> <table style="border-collapse:collapse;"> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody id="rad"> <tr><td><input type="radio" name="sel" checked="checked" /></td><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="sel" /><td>李四</td><td>女</td><td>湖南长沙</td></tr> <tr><td><input type="radio" name="sel" /><td>王七</td><td>男</td><td>河北邢台</td></tr> <tr><td><input type="radio" name="sel" /><td>赵六</td><td>男</td><td>河南郑州</td></tr> <tr><td><input type="radio" name="sel" /><td>刘三</td><td>男</td><td>湖北武汉</td></tr> <tr><td><input type="radio" name="sel" /><td>陈十</td><td>女</td><td>海南三亚</td></tr> <tr><td><input type="radio" name="sel" /><td>谢天</td><td>女</td><td>湖南郴州</td></tr> <tr><td><input type="radio" name="sel" /><td>邓九</td><td>男</td><td>北京海淀</td></tr> </tbody> </table> </div> <div class="tabWrap"> <table style="border-collapse:collapse;"> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody id="che"> <tr><td><input type="checkbox" checked="checked" /></td><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" /><td>李四</td><td>女</td><td>湖南长沙</td></tr> <tr><td><input type="checkbox" /><td>王七</td><td>男</td><td>河北邢台</td></tr> <tr><td><input type="checkbox" /><td>赵六</td><td>男</td><td>河南郑州</td></tr> <tr><td><input type="checkbox" /><td>刘三</td><td>男</td><td>湖北武汉</td></tr> <tr><td><input type="checkbox" /><td>陈十</td><td>女</td><td>海南三亚</td></tr> <tr><td><input type="checkbox" /><td>谢天</td><td>女</td><td>湖南郴州</td></tr> <tr><td><input type="checkbox" /><td>邓九</td><td>男</td><td>北京海淀</td></tr> </tbody> </table> </div> </body> </html>jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，
以及表格内容帅选等效果。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦