学生列表的增删HTML，js

最新推荐文章于 2023-11-05 11:32:08 发布

是星星就该闪烁

最新推荐文章于 2023-11-05 11:32:08 发布

阅读量283

点赞数 1

文章标签： html javascript css

本文链接：https://blog.csdn.net/FGHJRT/article/details/129189442

版权

HTML文件：学生表格.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
				color: #721c24; 
			}
			
			h1 {
				text-align: center;
				color: #333;
				margin: 20px 0;
			}
			
			table {
				margin: 0 auto;
				width: 800px;
				border-collapse: collapse;
				color: #004085;
			}
			
			th {
				padding: 10px;
				background: #cfe5ff;
				font-size: 20px;
				font-weight: 400;
			}
			
			td,
			th {
				border: 1px solid #b8daff;
			}
			
			td {
				padding: 10px;
				color: #666;
				text-align: center;
				font-size: 16px;
			}
			
			tbody tr {
				background: #fff;
			}
			
			tbody tr:hover {
				background: #e1ecf8;
			}
			
			.info {
				width: 900px;
				margin: 50px auto;
				text-align: center;
			}
			
			.info input {
				width: 80px;
				height: 25px;
				outline: none;
				border-radius: 5px;
				border: 1px solid #b8daff;
				padding-left: 5px;
			}
			
			.info button {
				width: 60px;
				height: 25px;
				background-color: #004085;
				outline: none;
				border: 0;
				color: #fff;
				cursor: pointer;
				border-radius: 5px;
			}
			
			.info .age {
				width: 50px;
			}
		</style>
	</head>

	<body>
		<h1>新增学员</h1>
		<div class="info">
			姓名：<input type="text" class="uname"> 
			年龄：<input type="text" class="age"> 
			性别:<select name="gender" id="" class="gender">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			薪资：<input type="text" class="salary"> 
			就业城市：<select name="city" id="" class="city">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳">深圳</option>
				<option value="曹县">曹县</option>

			</select>
			<button class="add">录入</button>
		</div>

		<h1>就业榜</h1>
		<table>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>薪资</th>
					<th>就业城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!--<tr>
					<td>1001</td>
					<td>欧阳霸天</td>
					<td>19</td>
					<td>男</td>

					<td>15000</td>
					<td>上海</td>
					<td>
						<a href="javascript:">删除</a>
					</td>
				</tr>-->
			</tbody>
		</table>
		
		<script src="student.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

Javascript文件：student.js命名

//  1. 准备好数据后端的数据
 let arrs = [{
		stuId: 1001,
		uname: '欧阳霸天',
		age: 19,
		gender: '男',
		salary: '20000',
		city: '上海'
	},
	{
		stuId: 1002,
		uname: '令狐霸天',
		age: 29,
		gender: '男',
		salary: '30000',
		city: '北京'
	},
	{
		stuId: 1003,
		uname: '诸葛霸天',
		age: 39,
		gender: '男',
		salary: '2000',
		city: '北京'
	},
];

//获取录入的信息
let uname = document.querySelector(".uname");
let age = document.querySelector(".age");
let gender = document.querySelector(".gender");
let salary = document.querySelector(".salary");
let city = document.querySelector(".city");
//获取录入的按钮
let add = document.querySelector(".add");
let tbody = document.querySelector("tbody")

function render() {
	tbody.innerHTML = ''
	for(let i = 0; i < arrs.length; i++) {
		let tr = document.createElement('tr');
		tr.innerHTML = `
					<td>${arrs[i].stuId}</td>
					<td>${arrs[i].uname}</td>
					<td>${arrs[i].age}</td>
					<td>${arrs[i].gender}</td>
					<td>${arrs[i].salary}</td>
					<td>${arrs[i].city}</td>
					<td>
						<a href="javascript:" id="${i}">删除</a>
					</td>
		`;
		tbody.appendChild(tr)
	}
}
render();

add.addEventListener('click', function() {
	let num = 1000;
	if(arrs.length != 0) {
		num = arrs[arrs.length - 1].stuId
	}
	let student = {
		stuId: num + 1,
		uname: uname.value,
		age: age.value,
		gender: gender.value,
		salary: salary.value,
		city: city.value
	}
	if(student.uname.replace(/^ +| +$/g, '') == '') {
		alert("姓名不能为空")
	} else if(!/^\D/.test(student.uname)) {
		alert("姓名不能以数字开头")
	} else {
		if(student.age.replace(/^ +| +$/g, '') == '') {
			alert("年龄不能为空")
		} else if(/[^\d]/g.test(student.age)) {
			alert("年龄只能是数字")
		} else {
			if(student.salary.replace(/^ +| +$/g, '') == '') {
				alert("薪资不能为空")
			} else if(/[^\d]/g.test(student.salary)) {
				alert("薪资只能是数字")
			} else {
				arrs.push(student)
				render();
				uname.value = age.value = salary.value = '';
				gender.value = '男';
				city.value = '北京';
			}
		}
	}

})

tbody.addEventListener('click', function(e) {
	if(e.target.tagName === 'A') {
		arrs.splice(e.target.id, 1)
		render();
	}

})