用含css的js代码实现简单的员工信息管理页面
时间: 2024-02-26 15:57:05 浏览: 21
好的,以下是一个简单的员工信息管理页面的html代码和含css的js代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>员工信息管理</title>
<script type="text/javascript">
// 添加员工信息
function addEmployee() {
// 获取输入框中的值
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
var position = document.getElementById("position").value;
// 创建一个新的table row
var newRow = document.createElement("tr");
// 创建四个新的table data cell
var nameCell = document.createElement("td");
var ageCell = document.createElement("td");
var genderCell = document.createElement("td");
var positionCell = document.createElement("td");
// 将输入框中的值添加到相应的table data cell中
nameCell.innerHTML = name;
ageCell.innerHTML = age;
genderCell.innerHTML = gender;
positionCell.innerHTML = position;
// 将新的table data cell添加到新的table row中
newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
newRow.appendChild(genderCell);
newRow.appendChild(positionCell);
// 将新的table row添加到table中
document.getElementById("employeeTable").appendChild(newRow);
}
// 清空输入框中的值
function clearInputs() {
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("gender").value = "";
document.getElementById("position").value = "";
}
</script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 50px;
}
table {
margin: 50px auto;
border-collapse: collapse;
border: 1px solid #ccc;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
input[type="text"], select {
padding: 5px;
margin-right: 10px;
margin-bottom: 10px;
width: 200px;
}
input[type="button"] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: 1px solid #007bff;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #0069d9;
border: 1px solid #0062cc;
}
input[type="button"]:active {
background-color: #0062cc;
border: 1px solid #005cbf;
}
</style>
</head>
<body>
<h1>员工信息管理</h1>
<table id="employeeTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>程序员</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>设计师</td>
</tr>
</tbody>
</table>
<h2>添加员工</h2>
<label>姓名:</label><input type="text" id="name"><br>
<label>年龄:</label><input type="text" id="age"><br>
<label>性别:</label>
<select id="gender">
<option value="男">男</option>
<option value="女">女</option>
</select><br>
<label>职位:</label><input type="text" id="position"><br>
<input type="button" value="添加" onclick="addEmployee(); clearInputs();">
</body>
</html>
```
上述代码中,使用了JavaScript来实现添加员工信息和清空输入框的功能,并且使用了内联样式和CSS样式表来美化页面。其中,内联样式用于设置页面标题的样式,CSS样式表用于设置表格、输入框和按钮的样式。需要注意的是,CSS样式表需要在head标签中添加。