实现功能包括:
- 输入员工id,姓名,选择职位,对信息进行表单验证
- 表格实现隔行变色添加
- 点击提交按钮后,弹框提示是否添加
- 实现全选全不选
- 单行删除
- 多行同时删除
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/41d3dec4b87bc8b26819f207a6358ace.png)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#empAdd {
width: 600px;
margin: 10px auto;
padding: 10px 0px;
text-align: center;
}
#empAdd fieldset {
height: 100px;
}
.btn {
margin-top: 5px;
width: 60px;
}
.container {
margin: 20px auto;
width: 500px;
text-align: center;
}
table {
width: 500px;
}
table, th, td {
border: 1px solid #000000;
border-collapse: collapse;
}
</style>
<script>
function empAdd(){
var empNo = document.getElementById("txtId").value;
var empName = document.getElementById("txtName").value;
var b = Check(empNo,empName);
var empJob = document.getElementById("txtJob").value;
var emp = new Object();
emp.empNo = empNo;
emp.empName = empName;
emp.empJob = empJob;
if(b){
if (window.confirm("编号:"+empNo+" 姓名:"+empName+" 职位:"+empJob+",确定添加吗?")) {
empMessage(emp);
}
}
}
function Check(<