利用js实现邮件的选中删除等操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邮件--重点</title>
<style>
table{
width: 600px;
border: 1px solid black;
border-collapse: collapse;
margin: 100px auto;
}
table tr td,
table tr th{
border: 1px solid black;
width: 200px;
}
table tr:nth-child(odd){
background-color:#F7E967 ;
}
table tr:nth-child(even){
background-color:#F9AEAC ;
}
table tr th{
background-color: #A7C5BD;
}
table tr:hover{
background-color: #647D8E;
}
</style>
<script>
function ckboxAll(obj){
var flag;
var emailArr = document.getElementsByName("email");
for(var i=0;i<emailArr.length;i++){
emailArr[i].checked = obj.checked;
}
document.getElementsByName("ckbox")[0].checked = obj.checked;
document.getElementsByName("ckbox")[1].checked = obj.checked;
}
function ckAll(flag){
var emailArr = document.getElementsByName("email");
if(flag != -1){
for(var i=0;i<emailArr.length;i++){
emailArr[i].checked = flag;
document.getElementsByName("ckbox")[0].checked = flag;
document.getElementsByName("ckbox")[1].checked = flag;
}
}
else{
for(var i=0;i<emailArr.length;i++){
emailArr[i].checked = !emailArr[i].checked;
}
}
}
function delSelect(){
var emailArr = document.getElementsByName("email");
for(var i=0;i<emailArr.length;i++){
if(emailArr[i].checked){
var tr = emailArr[i].parentNode.parentNode;
tr.parentNode.removeChild(tr);
i--;
}
}
}
</script>
</head>
<body>
<table id="tab">
<tr>
<th><input type="checkbox" name="ckbox" onclick="ckboxAll(this)">全选</th>
<th>发件人</th>
<th >邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tr>
<td><input type="checkbox" name="email"></td>
<td>张启山1</td>
<td>我是邮件11</td>
<td>我是附属信息11</td>
</tr>
<tr>
<td><input type="checkbox" name="email" ></td>
<td>张启山2</td>
<td>我是邮件22</td>
<td>我是附属信息22</td>
</tr>
<tr>
<td><input type="checkbox" name="email"></td>
<td>张启山3</td>
<td>我是邮件33</td>
<td>我是附属信息33</td>
</tr>
<tr>
<td><input type="checkbox" name="email"></td>
<td>张启山4</td>
<td>我是邮件44</td>
<td>我是附属信息44</td>
</tr>
<tfoot>
<tr>
<th><input type="checkbox" name="ckbox" onclick="ckboxAll(this)">全选</th>
<th colspan="3">
<input type="button" value="全选" onclick="ckAll(1)">
<input type="button" value="取消全选" onclick="ckAll(0)">
<input type="button" value="反选" onclick="ckAll(-1)">
<input type="button" value="删除所选邮件" onclick="delSelect()">
</th>
</tr>
</tfoot>
</table>
</body>
</html>