综合jQuery在表格中的应用
更新:HHH   时间:2023-1-7


 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
  5.         <meta name="keywords" content="关键词1,关键词2,关键词3等等"/> 
  6.         <title>jQuery表格应用</title> 
  7.         <style type="text/css"> 
  8.             .tabWrap{width:400px; height:auto; border:1px solid #000; margin:10px auto;} 
  9.             table{width:100%; height:auto;} 
  10.             tr{width:100%; height:40px; line-height:40px; text-align:center;} 
  11.             thead{background:#d8d8d8; border-bottom:1px solid #000;} 
  12.             .even{background:#999;} 
  13.             .odd{pink;} < /span>
  14.             .selected{background:yellow;} 
  15.         </style> 
  16.         <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
  17.         <script type="text/javascript"> 
  18.             $(function(){ 
  19.                 //普通的隔行变色效果,且排除表头 
  20.                 $("tbody>tr:odd").addClass("odd"); 
  21.                 $("tbody>tr:even").addClass("even"); 
  22.  
  23.                 //使用contains选择器将某一行变为高亮显示 
  24.                 $("tr:contains('王五')").addClass("selected"); 
  25.  
  26.                 //单选框控制表格行高亮 
  27.                 $("#rad>tr").click(function(){ 
  28.                     $(this).addClass("selected") 
  29.                            .siblings().removeClass("selected") 
  30.                            .end() //如果需要重新返回到$(this)对象就可以用end()方法 
  31.                            .find(":radio").prop("checked",true); 
  32.                 }) 
  33.                 $("input:checked").parents("tr").addClass("selected");//默认选中行高亮 
  34.  
  35.                 //复选框控制表格高亮 
  36.                 $("#che>tr").click(function(){ 
  37.                     if($(this).hasClass("selected")){ 
  38.                         $(this).removeClass("selected") 
  39.                                .find(":checkbox").prop("checked",false); 
  40.                     }else{ 
  41.                         $(this).addClass("selected") 
  42.                                .find(":checkbox").attr("checked",true); 
  43.                     } 
  44.                 }) 
  45.  
  46.                 //表格展开关闭 
  47.                 $("tr.parent").click(function(){//获取所谓的父行,并给点击事件 
  48.                     $(this) 
  49.                     .toggleClass("selected")   //添加或删除高亮 
  50.                     .siblings(".child_"+this.id).toggle();  //隐藏或显示所谓的字行 
  51.                     //".child_"+this.id这样写必须命名符合规则,child_后面的跟id一样 
  52.                 }) 
  53.  
  54.                 //表格内容帅选  利用contains选择器和filter()方法 
  55.                 $("#filterName").keyup(function(){ 
  56.                     $("tbody tr").hide() 
  57.                                  .filter(":contains('"+($(this).val())+"')").show(); 
  58.                 }) 
  59.             }) 
  60.         </script> 
  61.     </head> 
  62.     <body> 
  63.         <div style="margin:0 auto; width:400px; height:auto;"> 
  64.             jQuery应用与表格隔行变色效果,行高亮效果,单选框控制表格行高亮,复选框控制表格高亮,表格展开关闭,以及表格内容帅选等效果。<br /> 
  65.            帅选: <input type="text" id="filterName" /> 
  66.         </div> 
  67.         <div class="tabWrap"> 
  68.             <table style="border-collapse:collapse;"> 
  69.                 <thead> 
  70.                     <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
  71.                 </thead> 
  72.                 <tbody> 
  73.                     <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> 
  74.                     <tr class="child_row_01"><td>张三</td><td></td><td>浙江宁波</td></tr> 
  75.                     <tr class="child_row_01"><td>李四</td><td></td><td>湖南长沙</td></tr> 
  76.                     <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> 
  77.                     <tr class="child_row_02"><td>王五</td><td></td><td>河北邢台</td></tr> 
  78.                     <tr class="child_row_02"><td>赵六</td><td></td><td>河南郑州</td></tr> 
  79.                     <tr class="child_row_02"><td>刘三</td><td></td><td>湖北武汉</td></tr> 
  80.                     <tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr> 
  81.                     <tr class="child_row_03"><td>陈十</td><td></td><td>海南三亚</td></tr> 
  82.                     <tr class="child_row_03"><td>谢天</td><td></td><td>湖南郴州</td></tr> 
  83.                     <tr class="child_row_03"><td>邓九</td><td></td><td>北京海淀</td></tr> 
  84.                 </tbody> 
  85.             </table> 
  86.         </div> 
  87.         <div class="tabWrap"> 
  88.             <table style="border-collapse:collapse;"> 
  89.                 <thead> 
  90.                     <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
  91.                 </thead> 
  92.                 <tbody id="rad"> 
  93.                     <tr><td><input type="radio" name="sel" checked="checked" /></td><td>张三</td><td></td><td>浙江宁波</td></tr> 
  94.                     <tr><td><input type="radio" name="sel" /><td>李四</td><td></td><td>湖南长沙</td></tr> 
  95.                     <tr><td><input type="radio" name="sel" /><td>王七</td><td></td><td>河北邢台</td></tr> 
  96.                     <tr><td><input type="radio" name="sel" /><td>赵六</td><td></td><td>河南郑州</td></tr> 
  97.                     <tr><td><input type="radio" name="sel" /><td>刘三</td><td></td><td>湖北武汉</td></tr> 
  98.                     <tr><td><input type="radio" name="sel" /><td>陈十</td><td></td><td>海南三亚</td></tr> 
  99.                     <tr><td><input type="radio" name="sel" /><td>谢天</td><td></td><td>湖南郴州</td></tr> 
  100.                     <tr><td><input type="radio" name="sel" /><td>邓九</td><td></td><td>北京海淀</td></tr> 
  101.                 </tbody> 
  102.             </table> 
  103.         </div> 
  104.         <div class="tabWrap"> 
  105.             <table style="border-collapse:collapse;"> 
  106.                 <thead> 
  107.                     <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
  108.                 </thead> 
  109.                 <tbody id="che"> 
  110.                     <tr><td><input type="checkbox" checked="checked" /></td><td>张三</td><td></td><td>浙江宁波</td></tr> 
  111.                     <tr><td><input type="checkbox" /><td>李四</td><td></td><td>湖南长沙</td></tr> 
  112.                     <tr><td><input type="checkbox" /><td>王七</td><td></td><td>河北邢台</td></tr> 
  113.                     <tr><td><input type="checkbox" /><td>赵六</td><td></td><td>河南郑州</td></tr> 
  114.                     <tr><td><input type="checkbox" /><td>刘三</td><td></td><td>湖北武汉</td></tr> 
  115.                     <tr><td><input type="checkbox" /><td>陈十</td><td></td><td>海南三亚</td></tr> 
  116.                     <tr><td><input type="checkbox" /><td>谢天</td><td></td><td>湖南郴州</td></tr> 
  117.                     <tr><td><input type="checkbox" /><td>邓九</td><td></td><td>北京海淀</td></tr> 
  118.                 </tbody> 
  119.             </table> 
  120.         </div> 
  121.     </body> 
  122. </html> 

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

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

返回web开发教程...