综合jQuery在表格中的应用

2025-02-12 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><metaname="keywords"content="关键词1，关键词2，关键词3等等"/><title>jQuery表格应用</title><styletype="text/css">.tabWrap{width:400px;height:auto;border:1pxsolid#000;margin:10pxauto;}table{width:100%;height:auto;}tr{width:100%;height:40px;line-height:40px;text-align:center;}thead{background:#d8d8d8;border-bottom:1pxsolid#000;}.even{background:#999;}.odd{pink;}< /span>.selected{background:yellow;}</style><scripttype="text/javascript"src="../jquery-1.7.2.min.js"></script><scripttype="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(){$("tbodytr").hide().filter(":contains('"+($(this).val())+"')").show();})})</script></head><body><divstyle="margin:0auto;width:400px;height:auto;">jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，以及表格内容帅选等效果。<br/>帅选：<inputtype="text"id="filterName"/></div><divclass="tabWrap"><tablestyle="border-collapse:collapse;"><thead><tr><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody><trclass="parent"id="row_01"><tdcolspan="3">前台设计组</td></tr><trclass="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr><trclass="child_row_01"><td>李四</td><td>女</td><td>湖南长沙</td></tr><trclass="parent"id="row_02"><tdcolspan="3">前台开发组</td></tr><trclass="child_row_02"><td>王五</td><td>男</td><td>河北邢台</td></tr><trclass="child_row_02"><td>赵六</td><td>男</td><td>河南郑州</td></tr><trclass="child_row_02"><td>刘三</td><td>男</td><td>湖北武汉</td></tr><trclass="parent"id="row_03"><tdcolspan="3">后台设计组</td></tr><trclass="child_row_03"><td>陈十</td><td>女</td><td>海南三亚</td></tr><trclass="child_row_03"><td>谢天</td><td>女</td><td>湖南郴州</td></tr><trclass="child_row_03"><td>邓九</td><td>男</td><td>北京海淀</td></tr></tbody></table></div><divclass="tabWrap"><tablestyle="border-collapse:collapse;"><thead><tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbodyid="rad"><tr><td><inputtype="radio"name="sel"checked="checked"/></td><td>张三</td><td>男</td><td>浙江宁波</td></tr><tr><td><inputtype="radio"name="sel"/><td>李四</td><td>女</td><td>湖南长沙</td></tr><tr><td><inputtype="radio"name="sel"/><td>王七</td><td>男</td><td>河北邢台</td></tr><tr><td><inputtype="radio"name="sel"/><td>赵六</td><td>男</td><td>河南郑州</td></tr><tr><td><inputtype="radio"name="sel"/><td>刘三</td><td>男</td><td>湖北武汉</td></tr><tr><td><inputtype="radio"name="sel"/><td>陈十</td><td>女</td><td>海南三亚</td></tr><tr><td><inputtype="radio"name="sel"/><td>谢天</td><td>女</td><td>湖南郴州</td></tr><tr><td><inputtype="radio"name="sel"/><td>邓九</td><td>男</td><td>北京海淀</td></tr></tbody></table></div><divclass="tabWrap"><tablestyle="border-collapse:collapse;"><thead><tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbodyid="che"><tr><td><inputtype="checkbox"checked="checked"/></td><td>张三</td><td>男</td><td>浙江宁波</td></tr><tr><td><inputtype="checkbox"/><td>李四</td><td>女</td><td>湖南长沙</td></tr><tr><td><inputtype="checkbox"/><td>王七</td><td>男</td><td>河北邢台</td></tr><tr><td><inputtype="checkbox"/><td>赵六</td><td>男</td><td>河南郑州</td></tr><tr><td><inputtype="checkbox"/><td>刘三</td><td>男</td><td>湖北武汉</td></tr><tr><td><inputtype="checkbox"/><td>陈十</td><td>女</td><td>海南三亚</td></tr><tr><td><inputtype="checkbox"/><td>谢天</td><td>女</td><td>湖南郴州</td></tr><tr><td><inputtype="checkbox"/><td>邓九</td><td>男</td><td>北京海淀</td></tr></tbody></table></div></body></html>

jQuery应用与表格隔行变色效果，行高亮效果，单选框控制表格行高亮，复选框控制表格高亮，表格展开关闭，

以及表格内容帅选等效果。