首页 > 代码库 > jQuery对表格的操作及其他应用
jQuery对表格的操作及其他应用
表格操作
1.隔行变色：对普通表格进行隔行换色；单击显示高亮样式；复选框选中高亮
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src=http://www.mamicode.com/"../js/jquery-3.1.0.min.js"></script> <title>表格应用--隔行/选中变色</title> <style type="text/css"> .tble{ border: 1px solid red; } /*偶数行样式*/ .even{ background: red; } /*奇数行样式*/ .odd{ background: yellow; } .selected{ background: red; } </style> </head> <body> <table class="tble"> <thead> <tr><th><input type="checkbox" id="CheckedAll"/></th><th>姓名</th><th>姓别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr> </tbody> </table> <script type="text/javascript"> $(function(){ //1.普通隔行换色，从表头开始算起 $("tr:odd").addClass("odd"); //给奇数行添加样式 $("tr:even").addClass("even"); //给偶数行添加样式 //2.给tbody中添加隔行换色 $("tbody>tr:odd").addClass("odd"); //给tbody中奇数行添加样式 $("tbody>tr:even").addClass("even"); //给tbody中偶数行添加样式 //3.单选控制表格行高亮 $("tbody>tr").click(function(){ $(this).addClass(‘selected‘).siblings().removeClass(‘selected‘).end().find(‘:radio‘).attr(‘checked‘,true); }) //4.复选框高亮样式 $(‘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); } }) }) </script> </body></html>
如果需要查看网页显示效果，复制粘贴代码运行就可以
2.表格展开关闭
<!DOCTYPE html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src=http://www.mamicode.com/"../js/jquery-3.1.0.min.js"></script> <title>表格应用--表格展开关闭</title> <style type="text/css"> .tble{ border: 1px solid red; } /*偶数行样式*/ .even{ background: red; } /*奇数行样式*/ .odd{ background: yellow; } .selected{ background: red; } .parent{ background: #CCCCCC; } </style> </head> <body> <table class="tble"> <thead> <tr><th></th><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><td>浙江宁波</td></tr> <tr class="child_row_01"><td></td><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><td>浙江宁波</td></tr> <tr class="child_row_02"><td></td><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><td>浙江宁波</td></tr> <tr class="child_row_03"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> </tbody> </table> <script type="text/javascript"> $(function(){ $(‘tr.parent‘).click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮 .siblings(‘.child_‘+this.id).toggle(); // 隐藏/显示所谓的子行 }); }) </script> </body></html>
网页显示效果：
3.表格内容筛选：使用filter()筛选方法
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src=http://www.mamicode.com/"../js/jquery-1.4.4.min.js"></script> <title>表格应用--表格内容筛选</title></head><body> <div> <br/> 筛选：<input id="filterName" /><br/> </div> <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>张珊</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> <script type="text/javascript"> $(function(){ //使用filter()筛选方法 $("#filterName").keyup(function(){ //为文本框绑定keyup事件 $("table tbody tr").hide().filter(":contains(‘"+( $(this).val() )+"‘)").show(); }).keyup(); //DOM加载完成时，绑定事件完成后立即触发 }) </script> </table></body></html>
网页显示效果：
其他应用
1.网页字体大小：网站中经常有“放大”和“缩小”字号的控制，单击他们，控制字体呈现不同大小的效果
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src=http://www.mamicode.com/"../js/jquery-3.1.0.min.js"></script> <title>其他应用--字体放大缩小</title> </head> <body> <form> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">缩小</span> </div> <div> <p id="para">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。</p> </div> </div> </form> <script type="text/javascript"> $(function(){ //无限放大 缩小字体 $("span").click(function(){ //为span元素绑定单击事件 var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位 var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位 var unit = thisEle.slice(-2); //获取单位，slice()返回字符串中从指定的字符开始的一个字符串 var cName = $(this).attr("class"); if(cName=="bigger"){ textFontSize += 2 }else{ textFontSize -= 2; } $("#para").css("font-size",textFontSize + unit); //再次获取“para”元素，并为他的font-size属性赋新值（textFontSize），并拼接上单位 }) //上面方法是无限放大，无限缩小，如果不合适，则设置最大字体和最小字体 $("span").click(function(){ //为span元素绑定单击事件 var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位 var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位 var unit = thisEle.slice(-2); //获取单位，slice()返回字符串中从指定的字符开始的一个字符串 var cName = $(this).attr("class"); if(cName == "bigger"){ if(textFontSize <= 22){ textFontSize += 2; } }else if(cName == "smaller"){ if(textFontSize >= 12){ textFontSize -= 2; } } $("#para").css("font-size",textFontSize + unit); }) }) </script> </body></html>
网页显示效果：两种不同的显示效果，第一种无限放大缩小；第二种控制最大最小字号进行显示
2.网页选项卡：通过隐藏和显示来切换不同内容
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.1.0.min.js"></script> <title>其他应用--网页选项卡</title> <style type="text/css"> .selected{background: yellow;} .tab{width:400px; font-size:12px;} .tab_menu ul{padding:0px;margin:0px;} .tab_menu li{list-style:none;display:block; float:left;background:#C2CEFE; height:22px; line-height:22px; padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;} .tab_box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } .tab_menu ul li.selected{background:#dadada; cursor:pointer; } .hide{display:none;} .hover{background: green;} </style> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">实时</li> <li>新闻</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>实时</div> <div class="hide">新闻</div> <div class="hide">娱乐</div> </div> </div> <script type="text/javascript"> $(function(){ var $div_li = $("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前li元素高亮 .siblings().removeClass("selected"); //去掉其他同辈li元素的高亮 var index = $div_li.index(this); //获取当前单击的li元素在全部li元素中的索引 $("div.tab_box > div") //选取子节点 .eq(index).show() //显示li元素对应的div元素 .siblings().hide(); //隐藏其他几个同辈的div元素 }).hover(function(){ //添加光标滑过效果 $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) }) </script> </body></html>
网页显示效果：
jQuery对表格的操作及其他应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。