25.表格全选——案例

醉梦依依惜

已于 2023-04-18 20:30:36 修改

阅读量57

点赞数

分类专栏：核心日记-java道路文章标签： html css 前端

于 2022-08-06 16:21:26 首次发布

本文链接：https://blog.csdn.net/khmff/article/details/126196915

版权

网页交互表格操作复选框事件处理 JavaScript

关键词由CSDN通过智能技术生成

核心日记-java道路专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
        table{
            border:1px solid;
            margin:auto;
            width:500px;
        }
        td,th{
            text-align:center;
            border:1px solid;
        }
        div{
            text-align:center;
            margin:50px;
        }
        .out{
            background-color:white;
        }
        .over{
            background-color:pink;
        }
    </style>
    <script>
        window.onload = function(){
            document.getElementById("selectAll").onclick = function(){
                var cbs = document.getElementsByName("cd");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = true;
                }
            }
            document.getElementById("unSelectAll").onclick = function(){
                var cbs = document.getElementsByName("cd");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = false;
                }
            }
            document.getElementById("selectRev").onclick = function(){
                var cbs = document.getElementsByName("cd");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = !cbs[i].checked;
                }
            }
            document.getElementById("firstCd").onclick = function(){
                var cbs = document.getElementsByName("cd");
                for(var i=0;i<cbs.length;i++){
                    cbs[i].checked = this.checked;
                }
            }
            var trs = document.getElementsByTagName("tr");
            for(var i=0;i<trs.length;i++){
                trs[i].onmouseover = function(){
                    this.className = "over";
                }
                trs[i].onmouseout = function(){
                    this.className = "out";
                }
            }
        }
    </script>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="add" value="添加">
</div>
<table id="table">
    <caption>学生信息表</caption>
    <tr class="tr" >
        <th><input type="checkbox"id="firstCd" name="cd"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr class="tr">
        <td><input type="checkbox"  name="cd"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox" name="cd"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr class="tr">
        <td><input type="checkbox" name="cd"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>？</td>
        <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
</body>
</html>