演示checkbox和table的用法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示checkbox和table的用法</title>
<style type="text/css">
table {
border: #8080ff solid 1px;
width: 400px;
border-collapse: collapse;
}

table th {
border: #ff0000 solid 1px;
padding: 5px;
background-color: rgb(200, 200, 200);
}

table td {
border: #ff0000 solid 1px;
padding: 5px;
}
.one {
background-color: #ffff80;
}

.two {
background-color: #0080ff;
}

.over {
background-color: #80ffff;
}
.over {
background-color: #80ffff;
}
</style>
</head>
<body>
</body>

<script type="text/javascript">
var bgColor;
function trColor(){//颜色的隔行显示和控制背景颜色
var oTable = document.getElementById("mailTable");
var collTrNodes = oTable.rows;
for (var i = 1; i < collTrNodes.length; i++) {
if (i % 2 == 1) {
collTrNodes[i].className = "one";
}
else {
collTrNodes[i].className = "two";
};
//鼠标悬停时的状态
collTrNodes[i].onmouseover = function(){
bgColor = this.className;
this.className = "over";
}
collTrNodes[i].onmouseout = function(){
this.className = bgColor;
};
}
}
onload =trColor;//加载完后执行；

function checkAll(node){//全选功能的实现
var collMailChkNodes = document.getElementsByName("mail");
for(var i=1;i<collMailChkNodes.length;i++){
collMailChkNodes[i].checked =node.checked;
}
}

function checkAllByBtn(num){//全选，反选·全部取消等功能的实现
var collMailChkNodes =document.getElementsByName("mail")
for(var i=0;i<collMailChkNodes.length;i++){
if(num>1){
collMailChkNodes[i].checked = !(collMailChkNodes[i].checked);//反选功能的实现(状态的转换)
}else{
collMailChkNodes[i].checked = num;//0和1表示0和非0，即flase和true
}
}
}

function delMails(){
//反逻辑，卫条件
if(!confirm("你确认要删除所选的邮件吗?")){
return;
}
var collMailChkNodes = document.getElementsByName("mail");
//法1：从前往后删，需要把序号回退一下
for(var i=0;i<collMailChkNodes.length;i++){//此处需要遍历移除，所以要先i++然后i--。如果不需要遍历时，则只需要在for中不写i++就行了
if(collMailChkNodes[i].checked){
var otrNode = collMailChkNodes[i].parentNode.parentNode;//mail--td--tr
otrNode.parentNode.removeChild(otrNode);
i--;
}
}
}
/*//法2: 从后往前删，更简单
for(var i=collMailChkNodes.length-1;i>=0;i--){
if(collMailChkNodes[i].checked){
var oTrNode = collMailChkNodes[i].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
}
}
*/
</script>

<table id= "mailTable">
<tr>
<th><input type="checkbox" name="aa" onclick="checkAll(this);">全选</th>
<th> 发件人 </th>
<th> 邮件标题 </th>
<th> 附件</th>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三1</td>
<td>邮件标题1</td>
<td> 附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三2</td>
<td>邮件标题2</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三3</td>
<td>邮件标题3</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三4</td>
<td>邮件标题4</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三5</td>
<td>邮件标题5</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三6</td>
<td>邮件标题6</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三7</td>
<td>邮件标题7</td>
<td>附件1</td>
</tr>
<tr>
<td> <input type="checkbox" name="mail"> </td>
<td> 张三8</td>
<td>邮件标题8</td>
<td>附件1</td>
</tr>
</table>
    
<input type="button" value="全选" onclick="checkAllByBtn(1)">     
<input type="button" value="全部取消" onclick="checkAllByBtn(0)">     
<input type="button" value="反选" onclick="checkAllByBtn(2)">     
<input type="button" value="删除邮件" onclick="delMails()">

</html>

演示checkbox和table的用法

删除行

演示checkbox和table的用法

删除最后一行的结果

演示checkbox和table的用法

演示checkbox和table的用法

相关推荐