Code666 (代码贴、代码片段)

[JavaScript] jquery 表格隔行变色 选中行高亮（支持多选） →→→→→进入此内容的聊天室

来自 , 2019-05-24, 写在 JavaScript, 查看 106 次.
URL http://www.code666.cn/view/2b44928a
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <title></title><!--   引入jQuery -->
  7.  
  8.   <script src="../scripts/jquery-1.3.1.js" type="text/javascript">
  9. </script>
  10.   <script type="text/javascript">
  11. //<![CDATA[
  12.   $(function(){
  13.                 $("tbody>tr:odd").addClass("odd");
  14.                 $("tbody>tr:even").addClass("even");
  15.                 $('tbody>tr').click(function() {
  16.                         //判断当前是否选中
  17.                         var hasSelected=$(this).hasClass('selected');
  18.                         //如果选中，则移出selected类，否则就加上selected类
  19.                         $(this)[hasSelected?"removeClass":"addClass"]('selected')
  20.                                 //查找内部的checkbox,设置对应的属性。
  21.                                 .find(':checkbox').attr('checked',!hasSelected);
  22.                 });
  23.                 // 如果复选框默认情况下是选择的，则高色.
  24.                 $('tbody>tr:has(:checked)').addClass('selected');
  25.   })
  26.   //]]>
  27.   </script>
  28.   <style type="text/css">
  29. /*<![CDATA[*/
  30.   table {
  31.     border:0;
  32.     border-collapse:collapse;
  33.   }
  34.   td {
  35.     font:normal 12px/17px Arial;
  36.     padding:2px;
  37.     width:100px;
  38.   }
  39.   th {
  40.     font:bold 12px/17px Arial;
  41.     text-align:left;
  42.     padding:4px;
  43.     border-bottom:1px solid #333;
  44.   }
  45.   .even {
  46.     background:#eee;
  47.   }  /* 偶数行样式*/
  48.   .odd {
  49.     background:#ddd;
  50.   }  /* 奇数行样式*/
  51.   .selected {
  52.     background:#aaa;
  53.     color:#fff;
  54.   }
  55.   /*]]>*/
  56.   </style>
  57. </head>
  58.  
  59. <body>
  60.   <table>
  61.     <thead>
  62.       <tr>
  63.         <th></th>
  64.  
  65.         <th>姓名</th>
  66.  
  67.         <th>性别</th>
  68.  
  69.         <th>暂住地</th>
  70.       </tr>
  71.     </thead>
  72.  
  73.     <tbody>
  74.       <tr>
  75.         <td><input type="checkbox" name="choice" value="" /></td>
  76.  
  77.         <td>张山</td>
  78.  
  79.         <td>男</td>
  80.  
  81.         <td>浙江宁波</td>
  82.       </tr>
  83.  
  84.       <tr>
  85.         <td><input type="checkbox" name="choice" value="" /></td>
  86.  
  87.         <td>李四</td>
  88.  
  89.         <td>女</td>
  90.  
  91.         <td>浙江杭州</td>
  92.       </tr>
  93.  
  94.       <tr>
  95.         <td><input type="checkbox" name="choice" value="" checked='checked' /></td>
  96.  
  97.         <td>王五</td>
  98.  
  99.         <td>男</td>
  100.  
  101.         <td>湖南长沙</td>
  102.       </tr>
  103.  
  104.       <tr>
  105.         <td><input type="checkbox" name="choice" value="" /></td>
  106.  
  107.         <td>找六</td>
  108.  
  109.         <td>男</td>
  110.  
  111.         <td>浙江温州</td>
  112.       </tr>
  113.  
  114.       <tr>
  115.         <td><input type="checkbox" name="choice" value="" /></td>
  116.  
  117.         <td>Rain</td>
  118.  
  119.         <td>男</td>
  120.  
  121.         <td>浙江杭州</td>
  122.       </tr>
  123.  
  124.       <tr>
  125.         <td><input type="checkbox" name="choice" value="" /></td>
  126.  
  127.         <td>MAXMAN</td>
  128.  
  129.         <td>女</td>
  130.  
  131.         <td>浙江杭州</td>
  132.       </tr>
  133.     </tbody>
  134.   </table>
  135. </body>
  136. </html>
  137.  

回复 "jquery 表格隔行变色 选中行高亮（支持多选）"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666