Dom编程（邮件的全选、反选、删除选中项）

最新推荐文章于 2020-01-26 11:27:00 发布

Lola的笔记

最新推荐文章于 2020-01-26 11:27:00 发布

阅读量742

点赞数

本文链接：https://blog.csdn.net/melinda23096/article/details/38705083

版权

html+css+javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

邮件的全选、反选、删除选中项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>邮件的全选、反选、删除选中项</title>
<style type="text/css">
table{
	border:1px solid #06F;
	width:60%;
}
th{
	background-color:#0C0;
}
td, th{
	border:1px solid #00C;
}
.one{
	background-color:#FF0;
}
.two{
	background-color:#0CF;
}
.over{
	background-color:#06C;
}
</style>

<script type="text/javascript">
var name;
function colorful(){
	var tableNode = document.getElementsByTagName("table")[0];
	var rows = tableNode.rows;
	for(var x=1; x<rows.length-1; x++){
		if(x%2==1){
			rows[x].className = "one";	
		}else{
			rows[x].className = "two";	
		}
		
		rows[x].onmouseover = function(){
			name = this.className;
			this.className = "over";
		}
		rows[x].onmouseout = function(){
			this.className = name;
		}
	}
}
window.onload = colorful;

function checkAll(node){
	var mails = document.getElementsByName("mail");
	for(var x=0; x<mails.length; x++){
		mails[x].checked = node.checked;	
	}
}

function checkByButton(index){
	var mails = document.getElementsByName("mail");
	for(var x=0; x<mails.length; x++){
		if(index>1){
			mails[x].checked = !mails[x].checked;
		}else{
			mails[x].checked = index;	
		}
	}
}

function deleteMail(){
	if(!window.confirm("你确定要删除这些邮件吗？")){
		return ;
	}
	var mails = document.getElementsByName("mail");
	var arr = new Array();
	var pos = 0;
	for(var x=0; x<mails.length; x++){
		if(mails[x].checked){
			arr[pos++] = mails[x];
		}
	}
	
	for(var x=0; x<arr.length; x++){
		var trNode = arr[x].parentNode.parentNode;
		trNode.parentNode.removeChild(trNode);
	}
	
	colorful();
}
</script>
</head>

<body>
<table>
    <tr>
        <th><input type="checkbox" name="all" οnclick="checkAll(this)"/>全选</th>
        <th>发件人</th>
        <th>邮件内容</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三01</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三02</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三03</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三04</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三05</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三06</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>张三07</td>
        <td>新的邮件</td>
    </tr>
    <tr>
        <th><input type="checkbox" name="all" οnclick="checkAll(this)" />全选</th>
        <th colspan="2">
            <input type="button" value="全选" οnclick="checkByButton(1)" />
            <input type="button" value="取消全选" οnclick="checkByButton(0)" />
            <input type="button" value="反选" οnclick="checkByButton(2)" />
            <input type="button" value="删除所选邮件" οnclick="deleteMail()" />
        </th>
    </tr>
</table>
</body>
</html>