jQuery表格增删改示例-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("#addBtn").click(function(){
//获取表单内容
var id =($(":text[name=id]").val());
var username =($(":text[name=userName]").val());
var age =($(":text[name=age]").val());
var address =($(":text[name=c]").val());
var password =($(":password").val());
//在id：delAllID之后追加内容
//外部插入
//$("#add").after("<tr ><td><input type='checkbox'/></td><td><span>'+id+'</span></td><td><span>'+uername+'</span></td><td><span>'+password+'</span></td><td><span>'+age+'</span></td><td><span>'+address+'</span></td><td ><a href=’javascript:void(0)‘ id=’delete‘>删除</a></td></tr>");
var h1="<tr id='";
var hi ="' class='afterAdd'><td><input id='check' type='checkbox' name='ck'/></td><td><span>"; //id
var h2="</span></td><td><span>"; //username
var h3="</span></td><td><span>"; //password
var h4="</span></td><td><span>"; //age
var h5="</span></td><td><span>"; //address
var h6="</span></td><td ><a href=";
var h8="javascript:void(0)";
var h9=" onclick='del(this)'>删除</a></td></tr>";
//在<tr id="add"/>标签之后，即外部插入以下内容
$("#add").after(h1+id+hi+id+h2+username+h3+password+h4+age+h5+address+h6+h8+h9);
});
$(":checkbox[name=allCheck]").click(function(){
//方式一
//获取当前标签是否选中的boolean值
/* var status = this.checked;
//获取其他新增的复选框
var checks = $(":checkbox[name=ck]");
if(status){
//添加属性
//prop：获取在匹配的元素集中的第一个元素的属性值
//prop(参数一，参数二)：参数一：标签名；参数二，参数属性
checks.prop("checked",status);
}else{
checks.prop("checked",false);
} */
//方式二
$(":checkbox[name=ck]").prop("checked",this.checked);
});
//删除全部标签
$("#delAllID").click(function(){
//获取选中的复选框并通过爷爷来删除整一行
$(":checkbox[name=ck]:checked").parent().parent().remove();
});
});
//删除一个
function del(obj){
//方式一
//获取父节点
//alert(obj.parentNode);
//方式二
//获取该标签的父标签的父标签然后移除自身
$(obj).parent().parent().remove();
};
</script>
</head>
<body>
<table border="1" width="600px">
<tr>
<th>选择</th>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr id="add">
<td><input id="allCheck" type="checkbox" name="allCheck" /></td>
<td colspan="6"><a href="javascript:void(0)" id="delAllID" >全部删除</a></td>
</tr>
</table>
<hr/>
<form>
<table border="1" width="300px">
<tr>
<td>编号</td>
<td><input type="text" name="id" value="1"/></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="userName" value="2"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userPass"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>住址</td>
<td><input type="text" name="c"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="添加" id="addBtn"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>