效果如图：
详细代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!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>"; //idvar h2="</span></td><td><span>"; //usernamevar h3="</span></td><td><span>"; //passwordvar h4="</span></td><td><span>"; //agevar h5="</span></td><td><span>"; //addressvar h6="</span></td><td ><a href=";var h8="javascript:void(0)";var h9=" οnclick='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>
