动态添加员工
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body * {
margin: 0px;
padding: 0px;
}
#empAdd, #empInfo {
width: 600px;
margin: 10px auto;
padding: 10px 0px;
text-align: center;
}
#empAdd fieldset {
height: 100px;
}
.btn {
margin-top: 5px;
width: 60px;
}
table {
border-collapse: collapse;
width: 500px;
margin: 0 auto;
text-align: center;
}
thead {
background-color: #e6e5e5;
}
td, th {
border: 1px solid #808080;
width: 100px;
height: 30px;
}
#foot {
width: 100px;
margin: 0 auto;
}
/* 偶数行样式*/
.even {
background-color: #FFF38F;
}
/* 奇数行样式*/
.odd {
background-color: #FFFFEE;
}
.selected {
background: #FF6500;
color: #fff;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//重置
//$("fieldset").wrap("<form></form>");
//表单验证
function valiDate(){
//验证
if($("#UserName").val().trim().length==0){
alert("员工姓名不能为空");
return false;
}else if($("#UserAge").val().trim().length==0){
alert("员工年龄不能为空");
return false;
}else{
return true;
}
}
//添加员工
$("#btnAdd").click(function(){
if(valiDate()){
//创建tr元素节点
var $tr=$("<tr></tr>");
var $age = $("#UserAge").val()
var $name = $("#UserName").val();
var $job = $("#position").find("option:selected").text();
$tr.html("<td><input type='checkbox' name='select' /></td> <td>"+$name+"</td> <td>"+$age+"</td> <td>"+$job+"</td> <td><input type='button' class='delBtn' value='删除' /></td>")
// //创建td
// var $td_select=$("<td><input type='checkbox' name='select'/></td> <td></td>");
// //员工年龄
//
// var $td_Age=$("<td></td>").text($("#UserName").val());
//
// //员工姓名
// var $td_Name=$("<td></td>").text($("#UserAge").val());
// //职位
// var $td_Job=$("<td></td>").text($("#position").find("option:selected").text());
// //删除
// var $td_Del=$("<td><input type='button' class='delBtn' value='删除' /></td>");
// //把td添加到tr中
// $tr.append($td_select);
// $tr.append($td_Age);
// $tr.append($td_Name);
// $tr.append($td_Job);
// $tr.append($td_Del);
//把tr添加到tbody中
$("tbody").append($tr);
}
//删除单行员工
$(".delBtn").click(function(){
$(this).parent().parent().remove();
//alert(11);
})
//全选/不选
$("th input").change(function(){
$("td input[type='checkbox']").prop("checked",this.checked);
})
//多选删除
$("#btnDelete").click(function(){
if($("td input[type='checkbox']:checked")){
$("td input[type='checkbox']:checked").parent().parent().remove();
}
})
})
})
</script>
</head>
<body>
<div id="empAdd">
<fieldset>
<form>
<legend><strong>添加员工</strong></legend>
<label>姓名:</label>
<input type="text" size="15" id="UserName" name="username" value="" />
<label>年龄:</label>
<input type="text" size="15" id="UserAge" name="age" value="" />
<label>职位:</label>
<select id="position">
<option value="0">程序员</option>
<option value="1">设计师</option>
<option value="2">项目经理</option>
</select>
<br /><br />
<div>
<input type="button" class="btn" id="btnAdd" value="添加" />
<input type="reset" class="btn" id="btnReset" value="重置" />
</div>
</form>
</fieldset>
</div>
<div id="empInfo">
<fieldset>
<legend><strong>员工管理</strong></legend>
<table>
<thead>
<tr>
<th><input type="checkbox" id="ckAll" value="0"></th>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="control">
<button class="btn" id="btnDelete">删除信息</button>
</div>
</fieldset>
</div>
</body>
</html>