难点
var name=$("#box1 input[name='name']").val().trim();
var isChecked=$("#all").attr("checked");
var id=$(this).attr("id");
<!DOCTYPE HTML>
<html>
<head>
<title>模拟员工管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: "微软雅黑"
}
h2, h4{ text-align: center; }
div#box1, div#box2 {
text-align:center;
}
hr{
margin: 20px 0;
}
table{
margin: 0 auto;
width: 70%;
text-align: center;
border-collapse:collapse;
}
td, th{padding: 7px; width:20%;}
th{
background-color: #DCDCDC;
}
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* --- 添加一个新员工 --- */
function addEmp(){
//获取将要添加的员工信息
var id=$("#box1 input[name='id']").val().trim();
var name=$("#box1 input[name='name']").val().trim();
var email=$("#box1 input[name='email']").val().trim();
var salary=$("#box1 input[name='salary']").val().trim();
//数据校验
//非空校验(id、namd、email、salary不能为空)
if(id==""||name==""||email==""||salary==""){
alert("添加的员工信息不能为空!");
return;
}
//id不能存在(如果id已经存在,则不能添加)
/*
方式1：获取所有tr行，遍历每个tr行
通过当前被遍历的tr行，获取tr行中的第二个元素td
通过td元素获取当前用户的id和添加的id进行比较
如果id相等，则提示id已经存在，并结束程序
若果循环结束，没有id相等，则执行添加
$(this)当前被遍历的tr行
*/
//alert($("table tr td:eq(1)").length);//不行，只能匹配所有tr行中的第二个td，结果只有一个
//$("td:nth-child(2)").length;//可以获取第二个子元素td
var isExist=false;
$("table tr").each(function(){
var _id=$(this).find("td").eq(1).text();
if(id==_id){
alert("id已存在,添加失败!");
isExist=true;
}
});
if(isExist){//如果id存在，就结束函数执行
return;
}
//添加员工信息到表格中
//>>创建一个tr行
var $tr=$("<tr></tr>");
//>>创建td单元格
var $td1=$("<td><input type='checkbox'/></td>");
var $td2=$("<td>"+id+"</td>");
var $td3=$("<td>"+name+"</td>");
var $td4=$("<td>"+email+"</td>");
var $td5=$("<td>"+salary+"</td>");
//将td元素添加到tr行中
$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
//将tr元素添加到table中
$("table").append($tr);
}
/* --- 删除选中的员工 --- */
function delEmp(){
//获取所有被选中的复选框，再获取其父元素的父元素tr,将tr删除即可删除被选中的员工
// $("input[type='checkbox']:checked").parent("td").parent("tr").remove();
var $trs=$("input[type='checkbox']:checked").parent("td").parent("tr");
if($trs.length==0){
alert("您还没有选中任何员工!");
return;
}
$trs.remove();
/*
* 获取所有被选中的复选框，遍历所有的复选框
* 判断当前被遍历的复选框的id属性值是否等于"all"
* 获取元素的属性值:attr("id")
*如果id属性值不为all,则删除当前复选框的祖先元素中的tr元素*/
// $("input[type='checkbox']:checked").each(function(){
// var id=$(this).attr("id");
// if(id!="all"){
// $(this).parents("tr").remove();
// }
// });
}
/* --- 修改指定id的员工 --- */
function updEmp(){
//获取修改后的员工信息
var id=$("#box2 input[name='id']").val().trim();
var name=$("#box2 input[name='name']").val().trim();
var email=$("#box2 input[name='email']").val().trim();
var salary=$("#box2 input[name='salary']").val().trim();
//数据校验
//非空校验(id、namd、email、salary不能为空)
if(id==""||name==""||email==""||salary==""){
alert("修改的员工信息不能为空!");
return;
}
//根据id执行修改
/*思路:
* 获取所有tr行，遍历每个tr行
* 获取当前遍历tr行中的第二个元素的id值
* 判断当前员工的id和用户输入的id是否相等
* 如果id相等，则执行修改(执行替换)
* 如果id不存在，则提示用户"id"不存在*/
var isExist=false;//假设id不存在
$("table tr").each(function(){
var _id=$(this).find("td:eq(1)").text();
if(id==_id){
//如果id相等则执行替换
$(this).find("td:eq(2)").text(name);
$(this).find("td:eq(3)").text(email);
$(this).find("td:eq(4)").text(salary);
isExist=true;
}
});
if(!isExist){
alert("修改的员工ID不存在");
}
}
/* 点击全选设置 员工所在的行全选或者全不选 */
function checkAll(thisobj){
//获取全选框的选中状态()
var isChecked=$("#all").attr("checked");
console.log(isChecked);
//将全选框的选中状态设置给所有的复选框
$(":checkbox").attr("checked",isChecked);
}
/*给所有的普通复选框加上点击事件，每当点击普通复选框都需要获取所有的普通复选框，
判断所有复选框是否被选中，如果是就选中全选复选框，如果不是则去取消选中*/
$(function () {
//获取所有复选框并绑定点击实现
var $chs=$("input[id!='all']:checkbox");
//在点击事件中获取所有普通复选框
$chs.click(function(){
//循环遍历所有普通复选框，判断所有普通复选框是否全部被选中
var allChecked=true;
$chs.each(function () {
var isChecked=$(this).attr("checked");
if(!isChecked){
//如果所有复选框中有一个没有被选中
$("#all").attr("checked",false);
//否则就设置全选复选框取消选中
allChecked=false;
}
});
//如果所有普通复选框全部被选中，就选中全选复选框
if(allChecked)
{
$("#all").attr("checked",true);
}
});
document.getElementsByClassName()
});
</script>
</head>
<body>
<h2>添加新员工</h2>
<div id="box1">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" onclick="addEmp()" id="add" value="添加"/>
</div>
<hr/>
<table border="1">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" id="all"/>
<!--全选-->
</th>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1</td>
<td>宋江</td>
<td>sj@163.com</td>
<td>12000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>2</td>
<td>武松</td>
<td>ws@163.com</td>
<td>10500</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>3</td>
<td>孙二娘</td>
<td>sen@163.com</td>
<td>11000</td>
</tr>
</table>
<h4><a href="#" onclick="delEmp()" id="del">删除选中</a></h4>
<hr/>
<div id="box2">
ID：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
邮箱：<input type="text" name="email"/>
工资：<input type="text" name="salary"/>
<input type="button" onclick="updEmp()" id="upd" value="修改"/>
</div>
</body>
</html>
