用JavaScript实现信息输入，能实现输入用户姓名和学号添加内容，并且点击全选按钮来清空信息，点击删除时能够删除所选内容，以及点击搜索按钮，使其能进行变色，要求序号自增长

实现信息输入

1. 添加用户名，学号，和性别选择
2. 序号能实现自增长
3. 实现全选和反选功能
4.实现删除功能
5.点击搜索变色使其相对应元素进行变色功能*

• CSS样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            margin: 0 auto;
        }

        .box {
            width: 800px;
            background-color: #6495ED;
            text-align: center;
            padding-top: 20px;
            color: white;
        }

        p {
            margin: 15px 0;
        }

        #btn {
            width: 150px;
            height: 30px;
            background-color: #40E0D0;
            color: white;
            line-height: 30px;
            text-align: center;
            border: 0;
        }

        .show {
            width: 800px;
        }

        th {
            width: 110px;
            text-align: center;
            background-color: #97B6F0;
            color: white;
        }
        tr{
             background-color: #D8BFD8; 
        }
        td {
            width: 110px;
            text-align: center;
            
        }
    </style>

• body部分

    <div class="wrap">
        <div class="box">
            <p>姓名：<input type="text" id="stuName"></p>
            <p>学号：<input type="text" id="stuNum"></p>
            <p>性别：<input type="radio" name="sex" checked>男
                <input type="radio" name="sex">女</p>
            <p>
                <input type="button" value="添加" id="btn" onclick="add()">
                <input type="button" value="全部删除" id="btn" onclick="delAll()">
                <input type="button" value="选中删除" id="btn" onclick="delCk()">
            </p>
            <input type="text" id="txt"><input type="button" value="搜索变色" id="search">
        </div>
        <div class="show">
            <table id="tab">
                <thead>
                    <tr>
                        <th><input type="checkbox" onclick="allck()" id="ckAll">全选</th>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>性别</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbd">
                    <tr>
                        <td><input type="checkbox" name="ck" onclick="ckCk()"></td>
                        <td>1</td>
                        <td>武文亚</td>
                        <td>09</td>
                        <td>女</td>
                        <td>2020/05/12</td>
                        <td><a href="#" onclick="del(this)">删除</a></td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>

• script部分

<script>
		//获取元素
        var stuName = document.getElementById('stuName');
        var stuNum = document.getElementById('stuNum');
        var sexs = document.getElementsByName('sex');
        var tab = document.getElementById('tab');
        var cks = document.getElementsByName('ck');
        var ckAll = document.getElementById('ckAll');
        var nums = document.getElementsByName('nums');
        var tbd = document.getElementById('tbd');
        var trs = tbd.getElementsByTagName('tr');
        var txt = document.getElementById('txt');
        var search = document.getElementById('search');

        //搜索
        search.onclick = function () {
            for (var i = 0; i < trs.length; i++) {
                if (trs[i].children[2].innerHTML == txt.value) {
                    trs[i].style.backgroundColor = 'yellow';
                }
            }

        }

        //性别选择
        function sexsCk() {
            for (var i = 0; i < sexs.length; i++) {
                if (sexs[0].checked == true) {
                    return '男';
                } else {
                    return '女';
                }
            }
        }

        //日期时间
        function daTe(){
            var dt = new Date();
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDate();
            
            year = year < 10 ? '0' + year : year;
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            
            return x = '' + year + '/' + month + '/' + day ;
        }

        //自增序号
        function zizeng() {
            for (var i = 0; i < trs.length; i++) {
                trs[i].children[1].innerText = i + 1;
            }
        }

        //单行删除
        function del(e) {
            e.parentElement.parentElement.remove();
            zizeng();
        }

        //添加方法
        function add() {
            //创建突然元素
            var tr = document.createElement('tr');
           
            //tr元素添加内容
            tr.innerHTML = '<td><input type="checkbox" name="ck" οnclick="ckCk()"></td>' +
                '<td >' + zizeng() + '</td>' +
                '<td>' + stuName.value + '</td>' +
                '<td>' + stuNum.value + '</td>' +
                '<td>' + sexsCk() + '</td>' +
                '<td>' + daTe() + '</td>' +
                '<td><a href="#" οnclick="del(this)">删除</a></td>'

            tab.lastElementChild.appendChild(tr);
            //清空文本框
            stuName.value = '';
            stuNum.value = '';
            //调用自增函数
            zizeng();

        }
        //全选/反选
        function allck() {
            //循环遍历，找出每一个小的复选框
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = ckAll.checked;
            }
        }

        function ckCk() {
            // 循环遍历，找出每一个小的复选框
            for (var i = 0; i < cks.length; i++) {
                // 判断小的复选框的checked的值，如果有一个值为false,全选的checked的值就为false
                if (cks[i].checked == false) {
                    ckAll.checked = false;
                    return;
                }
            }
            // 每一个小的复选框，checked都为true，那么全选的checked的值就为true
            ckAll.checked = true;
        }

        //全部删除
        function delAll() {
            // tab.lastElementChild.remove();

            // tab.lastElementChild.innerHTML = '';

            for (var i = cks.length - 1; i >= 0; i--) {
                cks[i].parentElement.parentElement.remove();
            }
        }

        //选中删除
        function delCk() {
            //遍历每一个小复选框，如果checked的值为true,说明被选中,那就删除它所在的一行trs
            // for(var i=0;i<cks.length;i++){
            //     if(cks[i].checked == true){
            //         cks[i].parentElement.parentElement.remove();
            //         i--;
            //     }
            // }

            //从后往前删
            for (var i = cks.length - 1; i >= 0; i--) {
                if (cks[i].checked == true) {
                    cks[i].parentElement.parentElement.remove();
                }
            }
        }

    </script>