写一个员工表的网页增删改查
下面是一个简单的员工表的网页增删改查的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>员工表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
form {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>员工表</h2>
<form id="addForm">
<input type="text" id="name" placeholder="姓名">
<input type="text" id="position" placeholder="职位">
<input type="text" id="department" placeholder="部门">
<button type="submit">添加</button>
</form>
<table id="employeeTable">
<tr>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
<th>操作</th>
</tr>
</table>
<script>
const employeeTable = document.getElementById('employeeTable');
const addForm = document.getElementById('addForm');
// 添加员工
addForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const position = document.getElementById('position').value;
const department = document.getElementById('department').value;
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${name}</td>
<td>${position}</td>
<td>${department}</td>
<td><button onclick="deleteRow(this)">删除</button></td>
`;
employeeTable.appendChild(newRow);
// 清空输入框
document.getElementById('name').value = '';
document.getElementById('position').value = '';
document.getElementById('department').value = '';
});
// 删除员工
function deleteRow(button) {
const row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
这个示例代码实现了一个简单的员工表的网页增删改查功能。在页面上有一个表格用来展示员工信息，下方有一个表单用于添加员工。点击表单中的添加按钮会将输入的员工信息添加到表格中，每一行都有一个删除按钮，点击删除按钮会删除对应的行。其他的修改和查询功能可以根据具体需求进行扩展实现
原文地址: http://www.cveoy.top/t/topic/hMmV 著作权归作者所有。请勿转载和采集!