pink老师学生就业统计表（2022年js基础）

最新推荐文章于 2024-09-03 16:07:32 发布

京昭码农

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量311

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_74162142/article/details/130668967

版权

该文介绍了一个使用HTML、CSS和JavaScript实现的学生就业统计表，通过localStorage存储用户输入的数据，并实现了数据的增、删、改、查功能。JavaScript部分涉及到数组操作，如map和join方法，以及事件监听处理数据的添加和删除。

摘要由CSDN通过智能技术生成

1、实现使用localstorage将用户输入的内容存储在浏览器本地内存中，并实现增、删、改、查。

2、熟练使用map（）、join（）对数组的操作

首先是html+css部分，做的比较粗糙，基本上是那个意思😅。

html+css


    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: content-box;
        }

        .main {
            text-align: center;
        }

        input {
            border: 1px solid #ccc;
            width: 80px;
            height: 20px;
            outline: none;
            margin: 10px;
            padding-left: 5px;
            font-size: 12px;
        }

        .info {
            margin-top: 50px;
        }

        select {
            width: 60px;
            height: 20px;
            margin: 5px;
            border: 1px solid #ccc;
            color: #000;
            font-size: 12px;
        }

        .tiao {
            margin: 0 auto 20px auto;
            width: 800px;
            height: 50px;
            text-align: end;
            line-height: 50px;
            background-color: #ccc;
        }

        table,
        th,
        td {
            border-collapse: collapse;
            border: 1px solid #000;
        }

        th {
            padding: 5px;
            background-color: #ccc;
        }

        td {
            padding: 5px;
            background-color: #eee;
        }

        table {
            margin: 0 auto;
            width: 800px;
        }

        i {
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>学生就业统计表</h1>
        <form class="info" autocomplete="off">
            <input type="text" name="uname" class="uname" value="老王">
            <input type="text" name="age" class="age" value="17">
            <input type="text" name="salary" class="salary" value="120000">
            <select name="gender" class="gender" ">
                <option value=" 男">男</option>
                <option value="女">女</option>
            </select>
            <select name="city" class="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="杭州">杭州</option>
                <option value="深圳">深圳</option>
            </select>
            <button>+添加</button>
        </form>
        <div class="biao">
            <div class="tiao"><i></i></div>
            <table>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>薪资</th>
                        <th>性别</th>
                        <th>就业城市</th>
                        <th>录入时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</body>

接下来就是js部分


    const info = document.querySelector('.info')
    const uname = info.children[0]
    const age = info.children[1]
    const salary = info.children[2]
    const gender = info.children[3]
    const city = info.children[4]
    const i = document.querySelector('.tiao i')
    const tbody = document.querySelector('tbody')
    info.addEventListener('submit', function (e) {
        e.preventDefault()
        for (let i = 0; i < 2; i++) {
            if (info.children[i].value === '') {
                return alert('输入错误')
            }
        }
        const timer = new Date().toLocaleString()
        arr.push(
            {
                stuID: arr.length ? arr[arr.length - 1].stuID + 1 : 1 ,
                uname: uname.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value,
                timer: timer
            }
        )
        this.reset()
        render()
        localStorage.setItem('data', JSON.stringify(arr))
    })
    const arr = JSON.parse(localStorage.getItem('data')) || []
    //将字符型转化成数组并存入到arr中
    function render() {
        //通过map遍历数组，并将数据返回给新数组
        const trarr = arr.map(function (ele, index) {
            return `
                    <tr>
                        <td>${ele.stuID}</td>
                        <td>${ele.uname}</td>
                        <td>${ele.age}</td>
                        <td>${ele.gender}</td>
                        <td>${ele.salary}</td>
                        <td>${ele.city}</td>
                        <td>${ele.timer}</td>
                        <td><a href="javascript:" data-id= ${index}>删除</a></td>
                    </tr>`
        })
        tbody.innerHTML = trarr.join('')
        i.innerHTML = `共有数据${trarr.length}条`
    }
    render()
    tbody.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            if (confirm('确定要删除这条数据嘛？')) {
                arr.splice(e.target.dataset.id, 1)
                render()
                localStorage.setItem('data', JSON.stringify(arr))
            }
        }
    })

1、思路开始，要使用localstorage.setItem('data'，obj)对用户所输入的对象进行接收，并将其渲染到页面中，分为用户添加渲染一次，和用户删除渲染一次，所以这里先写一个render函数，统一进行渲染

2、接着想到数据的存储，删除离不开数组，看一下，是否能够使用数组进行操作，观察了一下，可以，将用输入的数据归成一个对象，并将对象存储到数组里，先声明一个arr数组将存入到data键里面的东西能够‘拿出来’。

3、开始写渲染函数（可以先写一个初始化函数实现数据可视），使用了map（）方法将数组中的内容，还有索引号一一‘拿出来’，返回一个新的数组，这个数组接着使用join（）方法使数组变成字符串插入到tbody中，就此渲染函数结束

4、写用户输入阶段，e.preventDefault()阻止页面跳转，再接着就是判空，再就是value将用户输入的东西拿过来，并存入对象，再将对象加入到数组中，通过this.reset（）将数据清空，再渲染到页面中，这个时候最重要的是将arr重新存入到本地中。

5、删除模块，就是在渲染中将数组的索引，以自定义属性的属性给到a中，通过删除splice（找到这个索引，1），删除。。

写的不好。。。。🫡

京昭码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pink老师学生就业统计表（2022年js基础）

4、写用户输入阶段，e.preventDefault()阻止页面跳转，再接着就是判空，再就是value将用户输入的东西拿过来，并存入对象，再将对象加入到数组中，通过this.reset（）将数据清空，再渲染到页面中，这个时候最重要的是将arr重新存入到本地中。2、接着想到数据的存储，删除离不开数组，看一下，是否能够使用数组进行操作，观察了一下，可以，将用输入的数据归成一个对象，并将对象存储到数组里，先声明一个arr数组将存入到data键里面的东西能够‘拿出来’。
复制链接

扫一扫