编写HTML+CSS+JS代码效果图如下图,要求通过HTML+CSS代码可实现如图静态页面,点击添加增加一条新的员工信息,点击删除即删除该行信息。
时间: 2024-09-30 16:03:54 浏览: 22
为了实现这个需求,你可以按照以下步骤编写HTML、CSS和JavaScript代码:
1. HTML部分:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工信息表</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="employeeTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button onclick="addEmployee()">添加员工</button>
<script src="scripts.js"></script>
</body>
</html>
```
2. CSS部分 (styles.css):
```css
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
button {
margin-top: 10px;
}
```
3. JavaScript部分 (scripts.js):
```javascript
let employeeCount = 0;
function addEmployee() {
employeeCount++;
const newRow = `
<tr>
<td>${employeeCount}</td>
<td contenteditable="true">姓名</td>
<td>
<button onclick="deleteEmployee(this)">删除</button>
</td>
</tr>
`;
document.getElementById("employeeTable").getElementsByTagName('tbody')[0].innerHTML += newRow;
}
function deleteEmployee.btnDeleteElement(button) {
const row = button.parentNode.parentNode;
row.remove();
employeeCount--;
}
```
在这个例子中,我们首先创建了一个空的表格,并在`addEmployee`函数中动态生成新行。每次点击“添加员工”按钮,都会在表格底部添加一行,包括ID、姓名输入框和删除按钮。当点击删除按钮时,会通过`deleteEmployee`函数删除对应的行。
阅读全文