您的位置：首页 > Web前端 > HTML

演示checkbox和table的用法

2017-05-16 16:09 274 查看

<!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>

删除行

删除最后一行的结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dhtml checkbox

相关文章推荐

新的分享

章节导航