溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

綜合jQuery在表格中的應(yīng)用

發(fā)布時間：2020-06-04 06:40:03 來源：網(wǎng)絡(luò) 閱讀：438 作者：lflianglan 欄目：web開發(fā)

 

  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="關(guān)鍵詞1，關(guān)鍵詞2，關(guān)鍵詞3等等"/> 
  6.         <title>jQuery表格應(yīng)用</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選擇器將某一行變?yōu)楦吡溜@示 
  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");//默認(rèn)選中行高亮 
  34.  
  35.                 //復(fù)選框控制表格高亮 
  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.                 //表格展開關(guān)閉 
  47.                 $("tr.parent").click(function(){//獲取所謂的父行，并給點擊事件 
  48.                     $(this) 
  49.                     .toggleClass("selected")   //添加或刪除高亮 
  50.                     .siblings(".child_"+this.id).toggle();  //隱藏或顯示所謂的字行 
  51.                     //".child_"+this.id這樣寫必須命名符合規(guī)則，child_后面的跟id一樣 
  52.                 }) 
  53.  
  54.                 //表格內(nèi)容帥選  利用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應(yīng)用與表格隔行變色效果，行高亮效果，單選框控制表格行高亮，復(fù)選框控制表格高亮，表格展開關(guān)閉，以及表格內(nèi)容帥選等效果。<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">前臺設(shè)計組</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">前臺開發(fā)組</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">后臺設(shè)計組</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應(yīng)用與表格隔行變色效果，行高亮效果，單選框控制表格行高亮，復(fù)選框控制表格高亮，表格展開關(guān)閉，

以及表格內(nèi)容帥選等效果。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手