实现目的：
1添加新纪录弹出DIV表单，要求用户输入相应的字段信息。点击保存自动关闭后会在表格最后追加一行刚才的信息。
2.点击编辑时，会弹出一个div表单，要求用户对现有记录进行修改操作。关闭后表格更新信息。
3.点击删除操作会弹出警告，问用户是否真的删除，确定后记录才删除（加批量删除）
效果图：
初始 图1-1
添加新纪录 图1-2
编辑信息 图1-3
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.6.3.js" ></script>
<script type="text/javascript" src="js/department.js"></script>
<style type="text/css">
.window{
width:250px;
background-color:#d0def0;
position:absolute;
padding:2px;
margin:5px;
display:none;
}
td{
text-align:center;
}
</style>
<body>
<form action="" >
<table border="1px" id="table1" align="center">
<tr>
<td colspan="9"><b>员工信息表</b></td>
</tr>
<tr >
<td>编号</td>
<td>部门</td>
<td>姓名</td>
<td>职务</td>
<td>基本工资</td>
<td>考勤工资</td>
<td>绩效考核</td>
<td>公司福利</td>
<td>操作</td>
</tr>
<tr>
<td id="1">1</td>
<td>技术部</td>
<td>XX</td>
<td>高级程序员</td>
<td>6000</td>
<td>1500</td>
<td>1500</td>
<td>200</td>
<td><a href="javascript:void(0)" id="alter_table" onclick="add_record(this)" >编辑</a>/ <a href="javascript:void(0)" id="delete_tr" onclick="kk(this)" >删除</a><b>|</b><input type="checkbox" name="delete_more" /></td>
</tr>
<tr>
<td id="2">2</td>
<td>技术部</td>
<td>XX</td>
<td>架构师</td>
<td>10000</td>
<td>2000</td>
<td>1000</td>
<td>200</td>
<td><a href="javascript:void(0)" id="alter_table" onclick="add_record(this)" >编辑</a>/ <a href="javascript:void(0)" id="delete_tr" onclick="kk(this)" >删除</a><b>|</b><input type="checkbox" name="delete_more" /></td>
</tr>
<tr>
<td id="3">3</td>
<td>设计部</td>
<td>XX</td>
<td>高级设计师</td>
<td>7000</td>
<td>1200</td>
<td>1300</td>
<td>200</td>
<td><a href="javascript:void(0)" id="alter_table" onclick="add_record(this)" >编辑</a>/ <a href="javascript:void(0)" id="delete_tr" onclick="kk(this)" >删除</a><b>|</b><input type="checkbox" name="delete_more" /></td>
</tr>
<tr>
<td id="4">4</td>
<td>运维部</td>
<td>XX</td>
<td>高级网管</td>
<td>5000</td>
<td>1000</td>
<td>1000</td>
<td>200</td>
<td><a href="javascript:void(0)" id="alter_table" onclick="add_record(this)" >编辑</a>/ <a href="javascript:void(0)" id="delete_tr" onclick="kk(this)" >删除</a><b>|</b><input type="checkbox" name="delete_more" /></td>
</tr>
</table>
<div id="anniu" align="center">
<input type="button" value="增加" id="add_table" onclick="add_null()" />
<input type="button" value="删除最后一行" id="delete_table" onclick="delete_last()" />
<input type="button" value="添加新纪录" id="add_new" onclick="openview()" />
<input type="button" value="批量删除" id="delete_all" onclick="moreX()" />
</form>
</div>
<br>
<div id="show_message" class="window" align="center" style="width:300px;height:250px;display:none;border:1px solid black ;" >
<table id="table2">
<tr>
<td colspan="2"><b>修改员工信息</b></td>
</tr>
<tr>
<td>id:</td>
<td><input type="text" id="userid" style="width:160px" readonly="readonly" ></td>
</tr>
<tr>
<td>部门:</td>
<td><input type="text" id="department" style="width:160px"></input></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" id="name" style="width:160px"></input></td>
</tr>
<tr>
<td>职务:</td>
<td><input type="text" id="job" style="width:160px"></input></td>
</tr>
<tr>
<td>基本工资:</td>
<td><input type="text" id="salary" style="width:160px"></input></td>
</tr>
<tr>
<td>考勤工资:</td>
<td><input type="text" id="kaoqin" style="width:160px"></input></td>
</tr>
<tr>
<td>绩效考核:</td>
<td><input type="text" id="jixiao" style="width:160px"></input></td>
</tr>
<tr>
<td>公司福利:</td>
<td><input type="text" id="luckmoney" style="width:160px"></input></td>
</tr>
</table>
<input type="button" value="更新" onclick="alter_message(this)"/>
<input type="button" value="关闭" onclick="closeDiv()" />
</div>
<br>
<div id="add1" class="window" align="center" style="width:300px;height:230px;display:none;border:1px solid black ;" title="提升度阈值">
<table id="table3">
<tr>
<td colspan="2"><b>增加员工信息</b></td>
</tr>
<tr>
<td>部门:</td>
<td><input type="text" id="department1" style="width:160px"></input></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" id="name1" style="width:160px"></input></td>
</tr>
<tr>
<td>职务:</td>
<td><input type="text" id="job1" style="width:160px"></input></td>
</tr>
<tr>
<td>基本工资:</td>
<td><input type="text" id="salary1" style="width:160px"></input></td>
</tr>
<tr>
<td>考勤工资:</td>
<td><input type="text" id="kaoqin1" style="width:160px"></input></td>
</tr>
<tr>
<td>绩效考核:</td>
<td><input type="text" id="jixiao1" style="width:160px"></input></td>
</tr>
<tr>
<td>公司福利:</td>
<td><input type="text" id="luckmoney1" style="width:160px"></input></td>
</tr>
</table>
<input type="button" value="保存" onclick="add_message()"/>
<input type="button" value="关闭" onclick="closeview()" />
</div>
</body>
</html>
引用js页面代码
//获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;
$().ready(function(){
colorful();
})
function colorful()
{
$("table tr:odd").css("background-color", "yellow");
$("table tr:even:gt(0)").css("background-color", "orange");
$("table tr:even:lt(1)").css("background-color", "red");
$("table tr").each(function(){
$(this).children("td:eq(2)").css("background-color", "green");
})
}
function add_null()
{
//增加一行空记录
var num = $("#table1 tr").length;
$("<tr><td>"+num+"</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><a href='javascript:void(0)' id='alter_table' onclick='add_record(this)' >编辑</a>/ <a href='javascript:void(0)' id='delete_tr' onclick='kk(this)'>删除</a><b>|</b><input type='checkbox' name='delete_more' /></td></tr>").appendTo("#table1");
colorful();
}
function delete_last()
{
$("#table1 tr:last").remove();
}
function kk(nowTr)
{
//删除指定行
var result = confirm("删除不可恢复！");
if(result){
$(nowTr).parent().parent().remove();
}
}
function moreX()
{
//批量删除
$("input[name='delete_more']:checked").parent().parent().remove();
}
function init()
{
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".window").height();
popWidth=$(".window").width();
}
function add_record(element)
{
closeview();
//编辑并显示内容
openDiv();
var node = $(element).parent().parent();
node.children().eq(0).attr("class","xiugai");//设置其clas便于更新时易于找到
$("#userid").val(node.children().eq(0).text());
$("#department").val(node.children().eq(1).text());
$("#name").val(node.children().eq(2).text());
$("#job").val(node.children().eq(3).text());
$("#salary").val(node.children().eq(4).text());
$("#kaoqin").val(node.children().eq(5).text());
$("#jixiao").val(node.children().eq(6).text());
$("#luckmoney").val(node.children().eq(7).text());
colorful();
}
function add_message()
{
//添加新记录
var department = $("#department1").val();
var name = $("#name1").val();
var job = $("#job1").val();
var salary = $("#salary1").val()
var kaoqin = $("#kaoqin1").val();
var jixiao = $("#jixiao1").val();
var luckmoney = $("#luckmoney1").val();
var num = $("#table1 tr").length;
$("<tr><td id='"+num+"'>"+num+"</td><td>"+department+"</td><td>"+name+"</td><td>"+job+"</td><td>"+salary+"</td><td>"+kaoqin+"</td><td>"+jixiao+"</td><td>"+luckmoney+"</td><td><a href='javascript:void(0)' id='alter_table' onclick='add_record(this)' >编辑</a>/ <a href='javascript:void(0)' id='delete_tr' onclick='kk(this)'>删除</a><b>|</b><input type='checkbox' name='delete_more' /></td></tr>").appendTo("#table1");
colorful();
closeview();
}
function alter_message(message)
{
//保存更新表格内容
var num = parseInt($("#userid").val());
var department = $("#department").val();
var name = $("#name").val();
var job = $("#job").val();
var salary = $("#salary").val()
var kaoqin = $("#kaoqin").val();
var jixiao = $("#jixiao").val();
var luckmoney = $("#luckmoney").val();
var node = $("#table1 td").attr("id",num);
//alert($("#table1 td[class='xiugai']").text());
$("#table1 td[class='xiugai']").parent().children().eq(1).text(department);
$("#table1 td[class='xiugai']").parent().children().eq(2).text(name);
$("#table1 td[class='xiugai']").parent().children().eq(3).text(job);
$("#table1 td[class='xiugai']").parent().children().eq(4).text(salary);
$("#table1 td[class='xiugai']").parent().children().eq(5).text(kaoqin);
$("#table1 td[class='xiugai']").parent().children().eq(6).text(jixiao);
$("#table1 td[class='xiugai']").parent().children().eq(7).text(luckmoney);
$("#table1 td[class='xiugai']").attr("class","");
colorful();
closeDiv();
}
function openDiv()
{
init();
//计算弹出窗口的左上角Y的偏移量
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
//设定窗口的位置
$("#show_message").css("top",popY).css("left",popX).slideToggle("slow");
// $("#show_message").css('display','');
}
function closeDiv()
{
$("#show_message").css('display','none');
}
function openview()
{
closeDiv()
init();
//计算弹出窗口的左上角Y的偏移量
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
//设定窗口的位置
$("#add1").css("top",popY).css("left",popX).slideToggle("slow");
// $("#add1").css('display','');
}
function closeview()
{
$("#add1").css('display','none');
}