From 242475566084cf8217af6564f40447f79e88f03e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E9=91=AB=E6=9D=B0?= <2173036056@qq.com>
Date: Tue, 26 Nov 2024 03:00:19 +0000
Subject: [PATCH] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 卢鑫杰 <2173036056@qq.com>
---
 .../20241125 .html"                           | 156 ++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 "\345\215\242\351\221\253\346\235\260/20241125 .html"
diff --git "a/\345\215\242\351\221\253\346\235\260/20241125 .html" "b/\345\215\242\351\221\253\346\235\260/20241125 .html"
new file mode 100644
index 0000000..a4da17f
--- /dev/null
+++ "b/\345\215\242\351\221\253\346\235\260/20241125 .html"	
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>学生就业统计表</title>
+    <link rel="stylesheet" href="./iconfont/iconfont.css">
+    <link rel="stylesheet" href="css/index.css"/>
+</head>
+
+<body>
+<h1>学生就业统计表</h1>
+<form class="info" autocomplete="off">
+    <input type="text" class="uname" name="uname" placeholder="姓名"/>
+    <input type="text" class="age" name="age" placeholder="年龄"/>
+    <input type="text" class="salary" name="salary" placeholder="薪资"/>
+    <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>
+        <option value="曹县">曹县</option>
+    </select>
+    <button class="add">
+        <i class="iconfont icon-tianjia"></i>添加
+    </button>
+</form>
+
+<div class="title">共有数据<span>0</span>条</div>
+<table>
+    <thead>
+    <tr>
+        <th>ID</th>
+        <th>姓名</th>
+        <th>年龄</th>
+        <th>性别</th>
+        <th>薪资</th>
+        <th>就业城市</th>
+        <th>录入时间</th>
+        <th>操作</th>
+    </tr>
+    </thead>
+    <tbody>
+    <!--    <tr>
+            <td>1</td>
+            <td>迪丽热巴</td>
+            <td>23</td>
+            <td>女</td>
+            <td>12000</td>
+            <td>北京</td>
+            <td>2099/9/9 08:08:08</td>
+            <td>
+                <a href="javascript:">
+                    <i class="iconfont icon-shanchu"></i>
+                    删除
+                </a>
+            </td>
+        </tr>-->
+    </tbody>
+</table>
+<script>
+    // 参考数据
+    let initData = [
+        // {
+        //     stuId: 1,
+        //     uname: '迪丽热巴',
+        //     age: 22,
+        //     gender: '女',
+        //     salary: '12000',
+        //     city: '北京',
+        //     time: '2099/9/9 08:08:08'
+        // }
+    ]
+    const tbody = document.querySelector('tbody')
+
+    //渲染函数
+    function createTr() {
+        //获取json数据，没有则空数组
+        const newInitData = localStorage.getItem('stuData') ? JSON.parse(localStorage.getItem('stuData')) : []
+
+        initData=localStorage.getItem('stuData') ? JSON.parse(localStorage.getItem('stuData')) : []
+        //返回标签
+        const newData = newInitData.map(function (item, i) {
+            return `<tr>
+                        <td>${item.stuId}</td>
+                        <td>${item.uname}</td>
+                        <td>${item.age}</td>
+                        <td>${item.gender}</td>
+                        <td>${item.salary}</td>
+                        <td>${item.city}</td>
+                        <td>${item.time}</td>
+                        <td>
+                            <a href="javascript:" data-id="${i}">删除</a>
+                        </td>
+                    </tr>`
+        })
+        //渲染到tbody
+        tbody.innerHTML = newData.join("")
+
+        //获取数据条数
+        const span = document.querySelector('.title span')
+        span.innerText = newInitData.length
+    }
+
+    //调用渲染函数
+    createTr()
+
+    //添加数据到数组
+    const add = document.querySelector('.add')
+    add.addEventListener('click', function (e) {
+        //禁用默认行为
+        e.preventDefault()
+        //获取表单数据
+        const names = document.querySelectorAll('form [name]')
+        //创建对象
+        let stu = {}
+        stu['stuId'] = initData.length === 0 ? 1 : initData[initData.length - 1].stuId + 1
+        //判断是否为空
+        for (let i = 0; i < names.length; i++) {
+            if (!names[i].value) {
+                return alert('不能为空')
+            }
+            stu[names[i].name] = names[i].value
+        }
+        stu['time'] = new Date().toLocaleString()
+        //将对象添加到数组
+        initData.push(stu)
+        //保存到浏览器
+        localStorage.setItem('stuData', JSON.stringify(initData))
+        //重置表单
+        document.querySelector('form').reset()
+        //调用渲染函数
+        createTr()
+    })
+
+    //删除数据
+    tbody.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A' && confirm('你确定要删除吗')) {
+            //删除数组的数据
+            initData.splice(e.target.dataset.id, 1)
+            //覆盖json的数据
+            localStorage.setItem('stuData', JSON.stringify(initData))
+            //调用渲染函数
+            createTr()
+        }
+    })
+</script>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

