pink老师新增学员表（2022年）

最新推荐文章于 2024-07-30 10:27:19 发布

京昭码农

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量117

点赞数

文章标签： css3 html5 前端 javascript

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

版权

关于最新pink老师的js基础教学，相信有很多人找不到素材源码，css部分又不想打。。。

下面为html+css部分

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }

        html {
            background-color: aliceblue;
        }

        body {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        input {
            margin-right: 10px;
        }

        select {
            margin-right: 10px;
        }

        .uname {
            width: 50px;
            border: 1px solid #2adcdf;
            border-radius: 5px;
        }

        .age {
            width: 50px;
            border: 1px solid #2adcdf;
            border-radius: 5px;
        }

        .gender {
            width: 50px;
            border-radius: 5px;
        }

        .salary {
            width: 80px;
            border: 1px solid #2adcdf;
            border-radius: 5px;
        }

        .city {
            width: 50px;
            border: 1px solid #2adcdf;
            border-radius: 5px;
        }

        .add {
            width: 50px;
            border: 1px solid #2adcdf;
            border-radius: 5px;
            background-color: #2adcdf;
            color: #fff;
        }

        table {
            width: 700px;
            margin: 0 auto;
            border: 1px solid #000;
        }

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

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

        td {
            padding: 5px;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名:<input type="text" class="uname" name="uname">
        年龄:<input type="text" class="age" name="age">
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资: <input type="text" name="salary" class="salary">
        就业城市: <select name="city" class="city">
            <option value="北京">北京</option>
            <option value="广州">广州</option>
            <option value="长海">上海</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>
    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    
</body>

</html>

以下为js部分

const arr = []
        const tbody = document.querySelector('tbody')
        const info = document.querySelector('.info')
        const uname = info.children[0]
        const age = info.children[1]
        const gender = info.children[2]
        const salary = info.children[3]
        const city = info.children[4]
        info.addEventListener('submit', function (e) {
            e.preventDefault()
            const arr1 = document.querySelectorAll('[name]')
            for (let i = 0; i < arr1.length; i++) {
                if (arr1[i].value === '') {
                    return alert('录入错误')
                }
            }
            const obj = {
                stuId: arr.length + 1,
                uname: uname.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value
            }
            arr.push(obj) 
            this.reset()
            render()
        })
        //遍历数组内容，并将其打印到页面中
        function render() {
            tbody.innerHTML = ''
            //排他思想
            for (let i = 0; i < arr.length; i++) {
                const tr = document.createElement('tr')
                tr.innerHTML = `
                <td>${arr[i].stuId}</td>
                <td>${arr[i].uname}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].gender}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].city}</td>
                <td>
                    <a href="javascript:" data-id = ${i} >删除</a>
                </td>
            `
                tbody.appendChild(tr)
            }
        }
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                arr.splice(e.target.dataset.id, 1)
                render()
            }
        })

其中基本原理是利用一个对象，利用这个对象的各种属性去存储用户输入的数据，并将这个对象存储到数组中去，然后再次利用遍历数组将这些对象中的各个属性渲染到页面中。

值得注意的是其中的删除操作非常巧妙，利用了自定义属性。。。在渲染的过程中添加和数组索引相同的自定义属性，从而使splice操作能够找到需要删除的索引。

京昭码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
pink老师新增学员表（2022年）

其中基本原理是利用一个对象，利用这个对象的各种属性去存储用户输入的数据，并将这个对象存储到数组中去，然后再次利用遍历数组将这些对象中的各个属性渲染到页面中。值得注意的是其中的删除操作非常巧妙，利用了自定义属性。在渲染的过程中添加和数组索引相同的自定义属性，从而使splice操作能够找到需要删除的索引。关于最新pink老师的js基础教学，相信有很多人找不到素材源码，css部分又不想打。下面为html+css部分。
复制链接

扫一扫