<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//全选
//得到input然后得到type的属性
function selectAll(){
var tag=document.getElementsByTagName("input");
for(var i=0;i<tag.length;i++){
if(tag[i].type=="checkbox"){
tag[i].checked=true;
}
}
}
//全不选
function noSelect(){
var tag=document.getElementsByTagName("input");
for(var i=0;i<tag.length;i++){
if(tag[i].type=="checkbox"){
tag[i].checked=false;
}
}
}
//删除一个
function deleteOne(tag){
var de = window.confirm("确定删除?");
if(de){
var tr=tag.parentNode.parentNode;
var tbody=document.getElementById("tb");
tbody.removeChild(tr);
}
}
//全部删除
function deleteAllSelect(){
var tbody = document.getElementById("tb");
var inps = tbody.getElementsByTagName("input");
for(var i=inps.length-1;i>0;i--){
if( inps[i].checked ){
var tr = inps[i].parentNode.parentNode;
tbody.removeChild(tr);
}
}
var first = document.getElementById("first");
first.checked = null;
}
</script>
</head>
<body>
Username:<input type="text" id="name"/>
Password:<input type="text" id="password"/>
Email:<input type="text" id="email"/>
<hr/>
<table cellpadding='0' cellspacing='0' border='1' align="center" width="70%">
<tbody id="tb">
<tr>
<td><input type="checkbox" id="first"/></td>
<td>ID</td>
<td>Username</td>
<td>Password</td>
<td>Email</td>
<td><input type="button" value="Option"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>zmj</td>
<td>666666</td>
<td>114322@qq.com</td>
<td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>wyb</td>
<td>999999</td>
<td>6666@qq.com</td>
<td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>linlin</td>
<td>555555</td>
<td>linlin@com.cn</td>
<td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
</tr>
</tbody>
</table>
<hr/>
<center>
<input type="button" value="全选" onclick="selectAll()"/>
<input type="button" value="反选" onclick="noSelect()"/>
<input type="button" value="删除所选项" onclick="deleteAllSelect()" />
</center>
</body>
</html>