main

分支 (1)

管理

管理

main

lrl
/
2208李润岚 .html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            border: 3px solid black;
            margin-top: 20px;
        }

        tr>td {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
        }

        .xiu {
            width: 330px;
            height: 350px;
            border: 2px solid black;
            position: absolute;
            left: 750px;
            top: 0px;
            padding: 20px;
            display: none;
        }
    </style>
</head>

<body>
    <form class="for" action="">
        <br>
        姓名：<input name="name" type="text"><br><br>
        电话：<input class="phone" name="phone" type="text"><span></span><br><br>
        年龄：<input name="age" type="text"><br><br>
        学历：<input name="learn" type="text"><em></em><br><br>
        期望薪资：<input name="money" type="text"><br><br>
    </form>
    <button name="s">保存</button>

    <!-- 修改信息 -->
    <div class="xiu">
        <h3>请修改内容</h3>
        <form action="">
            <br>
            姓名：<input name="name1" type="text"><br><br>
            电话：<input class="phone1" name="phone1" type="text"><span></span><br><br>
            年龄：<input name="age1" type="text"><br><br>
            学历：<input name="learn1" type="text"><em></em><br><br>
            期望薪资：<input name="money1" type="text"><br><br>
            <button class="sure1">确定</button>
            <button class="no1">取消</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>电话</td>
                <td>年龄</td>
                <td>学历</td>
                <td>期望薪资</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>张三</td>
                <td>110</td>
                <td>18</td>
                <td>硕士</td>
                <td>5K</td>
                <td>
                    <button name="change">修改</button>
                    <button name="del">删除</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script>
        // 获取标签对象
        const oTbody = document.querySelector('tbody')

        const userName = document.querySelector('[name="name"]')

        const userPhone = document.querySelector('[name="phone"]')
        const userPhoneSpan = document.querySelector('span')
        const userAge = document.querySelector('[name="age"]')

        const userLearn = document.querySelector('[name="learn"]')
        const learnValEm = document.querySelector('em')
        console.log(learnValEm);
        const userMoney = document.querySelector('[name="money"]')

        // 获取保存按钮
        const s = document.querySelector('[name="s"]')

        // 获取修改按钮
        const xiuBtn = document.querySelector('.xiu')


        // 定义个人信息
        let info;


        // 保存按钮功能实现
        // 给联系电话input按钮添加鼠标失去焦点事件
        userPhone.addEventListener('blur', function () {
            let phoneVal = userPhone.value;
            // 判断电话号码
            if (/^1[35789]\d{9}$/.test(phoneVal)) {
                userPhone.style.border = '5px solid green';
                userPhoneSpan.innerHTML = '';

            } else {
                userPhone.style.border = '5px solid red';
                userPhoneSpan.innerHTML = `<span style = "color:red">请输入第一位是1、第二位是35789,并且长度为11位数字的电话号码</span>`;

            }
        })


        // 给学历input按钮添加鼠标失去焦点事件
        userLearn.addEventListener('blur', function () {
            let learnVal = userLearn.value;
            console.log(learnVal);
            // 判断学历
            if (learnVal === '专科' || learnVal === '本科' || learnVal === '博士' || learnVal === '硕士' || learnVal === '其他') {
                userLearn.style.border = '5px solid green';
                learnValEm.innerHTML = '';
            } else {
                userLearn.style.border = '5px solid red';
                learnValEm.innerHTML = `<em style = "color:red"> 学历请输入专科、本科、博士、硕士、其他</em> `;
            }
        })


        // 给保存按钮添加点击事件
        s.addEventListener('click', function () {

            // 获取输入的value
            let nameVal = userName.value;
            let phoneVal = userPhone.value;
            let ageVal = userAge.value;
            let learnVal = userLearn.value;
            let moneyVal = userMoney.value;

            // 非空验证
            if (!nameVal || !phoneVal || !ageVal || !learnVal || !moneyVal) {
                window.alert('请填写完整');
                return;

            }


            // 把输入的数据存储到对象中，一会把对象unshift存储进localStroage数组中
            let obj = {
                name: nameVal,
                phone: phoneVal,
                age: ageVal,
                learn: learnVal,
                money: moneyVal,
            }

            console.log(nameVal, phoneVal, ageVal, learnVal, moneyVal);
            console.log(obj);

            // 判断localStorage中有没有这个人的信息
            info = window.localStorage.getItem('info');
            console.log(info);

            // 判断localStorage中有没有这个人的信息，null是没有
            if (info === null) {
                // 判断电话号码
                if (!/^1[35789]\d{9}$/.test(phoneVal)) {
                    window.alert('电话号码请输入11位数字')
                }


                // 将输入的信息，还原为对应的数据类型
                // 把对象以数组的形式保存在localStorage中
                window.localStorage.info = JSON.stringify([obj]);
            } else {

                // 将个人信息还原为对应有数据类型
                info = JSON.parse(info);

                // 把对象添加到数组首位
                info.unshift(obj);

                // 把对象以数组的形式保存在localStorage中
                window.localStorage.info = JSON.stringify([obj]);

                // 调用函数渲染页面
                setPage()
            }

            // 从localStroage中获取结果
            info = JSON.parse(window.localStorage.getItem('info'));
            console.log(info);

            // 调用函数渲染页面
            setPage()
        })


        // 渲染页面
        function setPage() {

            let str = '';
            // 循环遍历数组
            info.forEach(function (item) {
                console.log(item);
                str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.age}</td>
                        <td>${item.learn}</td>
                        <td>${item.money}</td>
                        <td>
                            <button name="change">修改</button>
                            <button name="del">删除</button>
                        </td>
                    </tr>
                    `;
                // 把拼接的字符串写入页面中
                oTbody.innerHTML = str;
            })
        }


        // 获取修改框中的input
        const userName1 = document.querySelector('[name="name1"]')
        const userPhone1 = document.querySelector('[name="phone1"]')
        const userAge1 = document.querySelector('[name="age1"]')
        const userLearn1 = document.querySelector('[name="learn1"]')
        const userMoney1 = document.querySelector('[name="money1"]')
        // console.log(userName1, userPhone1, userAge1, userLearn1, userMoney1);

        // 修改框中的确定、取消按钮
        const sure1Btn = document.querySelector('.sure1')
        const on1Btn = document.querySelector('.no1')


        // 删除和修改功能实现
        oTbody.addEventListener('click', function (e) {


            // 点击删除按钮
            if (e.target.getAttribute('name') === 'del') {

                // 是否删除
                if (window.confirm('确定要删除此条信息吗')) {

                    // 从locaoStorage中删除个人信息
                    window.localStorage.removeItem('info');
                    oTbody.innerHTML = `<tr><td colspan="6">此条信息已删除</td></tr>`;
                }


                // 点击修改按钮
            } else if (e.target.getAttribute('name') === 'change') {

                // 弹出修改框
                xiuBtn.style.display = 'block';
            }

        })


        // 给修改框中的确定按钮添加事件
        sure1Btn.addEventListener('click', function (e) {
            // 阻止默认事件
            e.preventDefault();

            // 获取修改框中输入的修改内容
            let nameVal1 = userName1.value;
            let phoneVal1 = userPhone1.value;
            let ageVal1 = userAge1.value;
            let learnVal1 = userLearn1.value;
            let moneyVal1 = userMoney1.value;
            console.log(nameVal1, phoneVal1, ageVal1, learnVal1, moneyVal1);

            // 把输入的数据存储到对象中，一会把对象unshift存储进localStroage数组中
            let obj = {
                name: nameVal1,
                phone: phoneVal1,
                age: ageVal1,
                learn: learnVal1,
                money: moneyVal1,
            }
            console.log(obj);

            // 将输入的信息，还原为对应的数据类型
            // 把对象以数组的形式保存在localStorage中
            window.localStorage.info = JSON.stringify([obj]);

            // 从localStroage中获取结果
            info = JSON.parse(window.localStorage.getItem('info'));
            console.log(info);

            // 调用函数渲染页面
            setPage()
        })


        // 修改框中的取消添加点击事件
        on1Btn.addEventListener('click', function (e) {
            // 阻止默认事件
            e.preventDefault();

            // 从locaoStorage中删除个人信息
            window.localStorage.removeItem('info');

            // 修改框隐藏
            xiuBtn.style.display = 'none';

            userName1.value = '';
            userPhone1.value = '';
            userAge1.value = '';
            userLearn1.value = '';
            userMoney1.value = '';
        })


    </script>
</body>

</html>