js 信息录入

html

    姓名：<input type="text">
    学号<input type="text">
    年龄：<input type="text">
    性别：<input type="text">
    学历：<input type="text">
    <button class="add">添加</button>

    <table width="800px" height="50px">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
            <th>性别</th>
            <th>学历</th>
            <th>增删</th>
        </tr>
    </table>

​

css

 

        table,
        tr,
        td,
        th {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }

        table {
            margin: 10px auto;
        }

JavaScript

        //获取添加按钮
        let add = document.querySelector('.add');

        //获取table元素
        let table = document.querySelector('table');

        //获取所有的input
        let input = document.querySelectorAll('body>input');

        //点击添加
        add.onclick = function () {
            //创建tr
            let tr = document.createElement('tr');
            //将tr放入table
            table.appendChild(tr);
            for (let i = 0; i < input.length; i++) {
                //判断每个输入内容是否为空
                if (input[i].value.trim() == '') {
                    return alert('请填写完整信息！！！');
                }

            }

            //正则判断姓名
            if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(input[0].value))) {
                return alert('请输入合法的姓名！！！');
            }

            //正则判断学号
            if (!(/[0-9]{9}/.test(input[1].value))) {
                return alert('请输入正确的学号！！！');
            }

            //正则判断年龄
            if (!(/^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/.test(input[2].value))) {
                return alert('请输入正确的年龄');
            }

            //正则判断性别
            if (!(/^(男|女){1}$/.test(input[3].value))) {
                return alert('请输入正确的性别');
            }

            //循环遍历input，根据每一个value创建td
            for (let i = 0; i < input.length; i++) {
                //创建td
                let td = document.createElement('td');
                td.innerHTML = input[i].value;
                tr.appendChild(td);
            }

            //创建最后一个td并添加到tr中
            let td = document.createElement('td');
            tr.appendChild(td);

            //创建删除按钮并添加到td中
            let del = document.createElement('button');
            del.innerHTML = '删除';
            td.appendChild(del);

            //创建修改按钮并添加到td中
            let ale = document.createElement('button');
            ale.innerHTML = '修改';
            td.appendChild(ale);

            //删除
            del.onclick = getDel;

            //点击按钮修改
            ale.onclick = updata;

        }
        function getDel() {
            this.parentElement.parentElement.remove();
        }

        function updata() {
            //得到所有的tr
            let arrSon = this.parentElement.parentElement.children;
            if (this.innerHTML == '修改') {
                //切换状态
                this.innerHTML = '保存';
                for (let i = 0; i < arrSon.length - 1; i++) {
                    //创建input框
                    let myinput = document.createElement('input');
                    //将原本的内容放进input框中
                    myinput.value = arrSon[i].innerHTML;
                    //清空原有的内容
                    arrSon[i].innerHTML = '';
                    //将创建的input框架追加到对应的tr中
                    arrSon[i].appendChild(myinput);
                }

            } else {
                //切换状态
                this.innerHTML = '修改';
                for (let i = 0; i < arrSon.length - 1; i++) {
                    //得到修改后的value值
                    arrSon[i].innerHTML = arrSon[i].children[0].value;

                }
            }
        }