zoukankan      html  css  js  c++  java

  • js 全选 光棒效果

    1. <html>
    3. <head>
    5. <title></title>
    6. <script language="javascript" type="text/javascript">
    7.     function SelectAll(obj)
    8.     {
    9.         var tables = obj.parentElement.parentElement.parentElement;
    10.         for(i=2;i<tables.rows.length;i++)
    11.         {
    12.             var items = tables.rows.cells[0].getElementsByTagName("input");
    13.             if(obj.checked)
    14.             {
    15.                 items[0].checked=true;
    16.             }
    17.             else
    18.             {
    19.                 items[0].checked=false;
    20.             }
    21.         }
    22.     }
    23.    
    24.     function ReSelect(obj)
    25.     {
    26.         var tables = obj.parentElement.parentElement.parentElement;
    27.         var selectAll=tables.rows[0].cells[0].getElementsByTagName("input");
    28.         for(i=2;i<tables.rows.length;i++)
    29.         {
    30.             var items = tables.rows.cells[0].getElementsByTagName("input");
    31.             if(items[0].checked==false)
    32.             {
    33.                 selectAll[0].checked=false;
    34.                 return;
    35.             }
    36.         }
    37.         selectAll[0].checked=true;
    38.     }
    39.     var currentColor;
    40.     function Light(obj,eventName)
    41.     {
    42.         if(eventName=="onMouseOver")
    43.         {
    44.             currentColor=obj.style.backgroundColor;
    45.             obj.style.backgroundColor="green";
    46.             obj.style.cursor="hand";
    47.         }
    48.         else
    49.         {
    50.             obj.style.backgroundColor=currentColor;
    51.         }
    52.     }
    54. </script>
    55. </head>
    57. <body>
    58.     <table>
    59.         <tr>
    60.             <td><input type="checkbox" value="Select ALL" onclick="SelectAll(this)">Select All</td>
    61.         </tr>
    62.         <tr>
    63.             <td><hr></td>
    64.         </tr>
    65.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
    66.             <td><input type="checkbox" value="Item 1" onclick="ReSelect(this);">Item 1</td>
    67.         </tr>
    68.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
    69.             <td><input type="checkbox" value="Item 2" onclick="ReSelect(this);">Item 2</td>
    70.         </tr>
    71.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
    72.             <td><input type="checkbox" value="Item 3" onclick="ReSelect(this);">Item 3</td>
    73.         </tr>
    74.     </table>
    75. </body>
    77. </html>
  • 相关阅读:
    ABAP学习（13）：OO SALV使用实例
    ABAP学习（12）：Table Control显示
    某元素之外点击触发事件
    Windows打开文件
    'webpack'提示 不是内部或外部命令
    webpack提示安装webpack-cli
    Windows代替touch命令
    webstorm破解版
    如何获取对象的属性及属性值
    Array.apply(null,{length:6}).map()
  • 原文地址：https://www.cnblogs.com/wfwup/p/1626893.html
Copyright © 2011-2022 走看看