• javascript实现表格全选功能


    效果展示:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>标题</title>
     6     <script type="text/javascript">
     7         function selectAll(choiceBtn) {
     8             var arr = document.getElementsByName("choice")
     9             for(var i=0;i<arr.length;i++){
    10                 arr[i].checked=choiceBtn.checked
    11             }
    12         }
    13     </script>
    14 </head>
    15 <body>
    16     <table border="1" width="800px" height="800px">
    17         <tr>
    18             <td>选择</td><td>用户名</td><td>邮箱</td><td>电话</td><td>性别</td><td>操作</td>
    19         </tr>
    20         <tr>
    21             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    22         </tr>
    23         <tr>
    24             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    25         </tr>
    26         <tr>
    27             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    28         </tr>
    29         <tr>
    30             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    31         </tr>
    32         <tr>
    33             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    34         </tr>
    35         <tr>
    36             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    37         </tr>
    38         <tr>
    39             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    40         </tr>
    41         <tr>
    42             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    43         </tr>
    44         <tr>
    45             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    46         </tr>
    47         <tr>
    48             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    49         </tr>
    50         <tr>
    51             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    52         </tr>
    53         <tr>
    54             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    55         </tr>
    56         <tr>
    57             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
    58         </tr>
    59         <tr>
    60             <td><input type="checkbox" onclick="selectAll(this)">全选</td>
    61         </tr>
    62     </table>
    63 </body>
    64 </html>
  • 相关阅读:
    ueditor PHP版本使用方法
    PHP三维优先级运算
    navicate for mysql中的sql存放位置和备份
    wamp配置步骤
    phpeclipse xdebug 配置配置 -摘自网络
    xls 和 xml 数据 排序 绑定 -原创
    XSLT教程 比较全的 -摘自网络
    XPath在asp.net中查询XML -摘自网络
    windows上zend server安装 报The server encountered an internal error or misconfiguration and was unable to complete your request -解决方法 摘自网络
    开源项目 配置管理软件推荐
  • 原文地址:https://www.cnblogs.com/zzmx0/p/12577507.html
Copyright © 2020-2023  润新知