HTML是我们为用户展现数据的平台，因此也少不了对数据的终端的操作，
因此，今天就做一个简单的学生信息添加、删除和编辑的功能。
具体模块以及布局如下：
具体实现：
1、body中的实现
<body>
<div id="backbg"></div>
<div id="updatediv">
<table id="newtable" width="600px" cellpadding="0" cellspacing="0" border="1px blue solid">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
<td>年级</td>
</tr>
</thead>
<tbody id="tbodynew">
</tbody>
</table>
<button id="btn3">保存并退出</button>
<button id="btn2">退出</button>
</div>
编号：<input name="num" type="text" onblur="checkNum()" style="visibility:hidden"/><br>
姓名：<input name="name" type="text" onblur="checkName()"/><br>
性别：<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女<br>
爱好：<input name="hobi" type="checkbox" checked="checked" value="唱歌"/>唱歌
<input name="hobi" type="checkbox" value="跳舞" />跳舞
<input name="hobi" type="checkbox" value="画画" />画画<br>
年级：<select>
<option selected="selected">高一</option>
<option>高二</option>
<option>高三</option>
</select>
<button id="btn1">提交</button>
<table id="tablelast" width="300px" cellpadding="0" cellspacing="0" border="1px blue solid">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
<td>年级</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbodyold">
</tbody>
</table>
</body>2、style样式设置
<style>
#updatediv{
border:#999 2px solid;
width:800px;
height:200px;
position:absolute;
top:30%;
left:20%;
background:#FFF;
z-index:10;
}
#tablelast{
width:600px;
}
#btn2{
position:relative;
top:120px;
left:80%;
}
#backbg {
background-color: gray;
position: absolute;
left:0;
top:0;
z-index:3;
opacity:0.7;
display:block;
}
</style>3、script脚本实现
<script src="jquery-1.8.2.min.js"></script>
<script>
var arr=[];
var flag=true;
var $num=0;
$(function(){
$("div[id='updatediv']").hide();
$("button[id='btn2']").click(function(){
$("div[id='updatediv']").hide();
closeBg();
});
$("button[id='btn3']").click(function(){
var map=[];
var i=0;
$("tbody[id='tbodynew'] input").each(function(index,element){
map.push($(this)[0].value);
});
$("tbody[id='tbodyold'] td").each(function(index,element){
if(element.innerHTML==map[0]){//此处有多种方法进行判断，可以不通过选择器选择td，而是直接选择tr标签。或者将td的index进行取模后再判断。或者通过element.innerHTML等等更多方法
//alert("index: "+index+" map[0]: "+map[0]+"element: "+element);
$(this).parent().children().each(function(ind,ele){
if(ind<5){
ele.innerHTML=map[i];
i++;
}
});
}
});
$("div[id='updatediv']").hide();
closeBg();
});
$("button[id='btn1']").click(function(){
$num=$num+1;
arr.push($num);
var $name=$("input[name='name']").val();
var $sex="";
$("input[name='sex']").each(function(index,element){
if($(this).attr('checked')=='checked'){
$sex=$(this).val();
}
});
var $hobi="";
$("input[name='hobi']").each(function(index,element){
if($(this).attr('checked')=='checked'){
$hobi=$hobi+" "+$(this).val();
}
});
var $school="";
$("option").each(function(){
if($(this).attr('selected')=='selected'){
$school=$(this).val();
}
});
var str=
"<tr><td>"+$num+"</td>"+
"<td>"+$name+"</td>"+
"<td>"+$sex+"</td>"+
"<td>"+$hobi+"</td>"+
"<td>"+$school+"</td>"+
"<td><a href='#' onclick='update("+$num+")'>编辑</a>"+
" "+
"<a href='#' onclick='remove("+$num+")'>删除</a></td></tr>";
$("tbody[id='tbodyold']").append(str);
});
})
function update(num){
var str='';
var showtr;
showBg();
$("tbody:first").each(function(){
$(this).empty();//remove的问题在哪
});
$("div[id='updatediv']").show();
$("tbody[id='tbodyold'] td").each(function(index,element){
if(num==element.innerHTML){
$(this).parent().children().each(function(ind,ele){
//if(ind==1){
//str=str+"<td>"+ele.innerHTML+"</td>";
// }
if(ind<5){
str=str+"<td>"+"<input type='text' value='"+ele.innerHTML+"' />"+"</td>";
}
});
}
});
showtr="<tr>"+str+"</tr>";
$("tbody[id='tbodynew']").append(showtr);
}
function remove(num){
$("tbody>tr td").each(function (index,element){
if(element.innerHTML==num){
$(this).parent().remove();
}
});
}
function checkNum(){
var num=$("input[name='num']").val();
var reg=/^[1-9]{1,}$/;
var flag=reg.test(num);
if(!flag){
$("input[name='num']").focus();
$("input[name='num']").select();
$("input[name='num']").css("border","1px red solid");
}
else{
$("input[name='num']").css("border","1px solid");
}
}
function checkName(){
var name=$("input[name='name']").val();
var reg=/^[a-z]{1,}[0-9]{0,}$/;
var flag=reg.test(name);
if(!flag){
$("input[name='name']").focus();
$("input[name='name']").select();
$("input[name='name']").css("border","1px red solid");
}
else{
$("input[name='name']").css("border","1px solid");
}
}
function showBg() {
var bh = 600;
$("#backbg,#updatediv").show();
var bw = $("body").width();
$("#backbg").css({
height: bh,
width: bw,
});
// $("div[id='updatediv']").css("z-index","4");
$("div[id='fullbg']").css("z-index","5");
}
//关闭灰色 遮罩
function closeBg() {
$("#backbg,#updatediv").hide();
//$("div[id='updatediv']").css("z-index","0");
//$("div[id='backbg']").css("z-index","0");
}
</script>最后，当中还有些不足，如果您采纳后，希望您做得更加完善！