<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.2s ease;
}
.container {
width: 70vw;
margin: 0 auto;
background-color: #f2f2f2;
text-align: center;
}
.myForm {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.myForm input {
/* overflow: hidden; */
height: 22px;
width: 80px;
border-radius: 4px;
border: 1px solid #ccc;
}
.myForm input:nth-child(n+2) {
margin-right: 20px;
}
.myForm select {
height: 24px;
width: 80px;
border-radius: 4px;
border: 1px solid #ccc;
text-align: center;
margin-right: 20px;
}
.myForm input[type="submit"] {
background-color: #4CAF50;
color: white;
height: 24px;
margin-left: 10px;
}
.myForm input[type="submit"]:active {
background-color: #3e8e41;
box-shadow: 0 0 10px #3e8e41;
transform: scale(1.05);
}
.myForm input[type="reset"] {
background-color: #d8e1d8;
color: rgb(0, 0, 0);
height: 24px;
margin-right: 0;
}
.myForm input[type="reset"]:active {
background-color: #c1d0c1;
box-shadow: 0 0 10px #c1d0c1;
transform: scale(1.05);
}
h1:nth-of-type(2) {
margin-top: 50px;
}
table {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
background-color: #bfd1f0d6;
border: 1px solid #ccc;
margin-top: 30px;
}
table tr {
height: 33px;
}
table tr th:first-child {
border-radius: 10px;
}
table tr th:last-child {
border-radius: 10px;
}
table th,
table td {
border-right: 1px solid #b9b6b6;
border-bottom: 1px solid #b9b6b6;
color: rgb(49, 49, 49);
}
table th:last-child,
table td:last-child {
border-right: none;
}
table span {
display: inline-block;
cursor: pointer;
box-shadow: 0 0 2px #5c5c5c;
background-color: orangered;
transform: scale(1.3);
}
table span:active {
color: rgb(255, 0, 0);
}
table tr:nth-of-type(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<h1>学员信息录入</h1>
<form method="post" class="myForm">
<label for="name">姓名: </label>
<input type="text" id="name" name="name" required>
<label for="age">年龄: </label>
<input type="number" id="age" name="age" required>
<label for="gender">性别: </label>
<select id="gender" name="gender" required>
<option value="男">男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select>
<label for="salary">薪资: </label>
<input type="number" id="salary" name="salary" required>
<label for="city">就业城市: </label>
<select id="city" name="city" required>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<h1>学员信息列表</h1>
<table>
<thead>
<tr>
<th>学号</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>25</td>
<td>男</td>
<td>5000</td>
<td>北京</td>
<td>2021-01-01 12:00:00</td>
<td><span>删除</span></td>
</tr>
</tbody>
</table>
</div>
<script>
// document.querySelector('video').playbackRate = 1.7; //修改视频倍速
window.addEventListener('DOMContentLoaded', function () {
console.log("xixi");
let messageList_str = localStorage.getItem('messageList') || [];
if (messageList_str.length) {
messageList = JSON.parse(messageList_str);
render();
}
});
function render() {
let tbody_message_list = messageList.map(function (item, index) {
let atr = `
<tr>
<td>${index + 1}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>${item.salary}</td>
<td>${item.city}</td>
<td>${new Date().toLocaleString()}</td>
<td><span>删除</button></span></td
</tr>
`;
return atr;
});
tbody.innerHTML = tbody_message_list.join('');
}
let form = document.querySelector('.myForm');
let submit = document.querySelector('input[type="submit"]');
let reset = document.querySelector('input[type="reset"]');
let table = document.querySelector('table');
let tbody = table.querySelector('tbody');
let messageList = []
submit.addEventListener('click', function (e) {
let name = document.querySelector('#name');
let age = document.querySelector('#age');
let gender = document.querySelector('#gender');
let salary = document.querySelector('#salary');
let city = document.querySelector('#city');
let student = {};
if (name.value.trim() === '') {
alert('请填写姓名');
return;
} else {
student.name = name.value.trim();
}
if (age.value.trim() === '') {
alert('请填写年龄');
return;
} else {
student.age = age.value.trim();
}
if (gender.value.trim() === '') {
alert('请选择性别');
return;
} else {
student.gender = gender.value.trim();
}
if (salary.value.trim() === '') {
alert('请填写薪资');
return;
} else {
student.salary = salary.value.trim();
}
if (city.value.trim() === '') {
alert('请选择就业城市');
return;
} else {
student.city = city.value.trim();
}
e.preventDefault();
messageList.push(student);
render();
localStorage.setItem('messageList', JSON.stringify(messageList));
form.reset();
});
tbody.addEventListener('click', function (e) {
let tr = e.target.parentNode.parentNode;
tbody_children = Array.from(tbody.children);
let tr_index = tbody_children.indexOf(tr);
if (confirm('确定删除吗?')) {
tbody.removeChild(tr);
messageList.splice(tr_index - 1, 1);
render();
localStorage.setItem('messageList', JSON.stringify(messageList));
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号