黑马程序员：实现邮件列表功能的学习。

最新推荐文章于 2024-09-20 16:06:21 发布

睿智

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量807

点赞数

分类专栏： WEB开发基础文章标签： function input email button table xhtml

本文链接：https://blog.csdn.net/shazilv/article/details/7272461

版权

WEB开发基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

------------------------------------------------------------------android培训、java培训、期待与您交流！--------------------------------------------------------
1.掌握的内容有：复选框全选，按钮全选，按钮取消全选，按钮反选，按钮删除所选邮件并弹出确认对话框，行颜色间隔显示，鼠标经过时高亮显示，离开时还原。
2.通过比较自己的代码和教程演示代码，掌握了可以使代码更加简洁的编程思想。

☆按钮全选，取消全选，反选可以用一个函数实现。

function checkByButton(num)
{
    var emails = document.getElementsByName("email");
    for(var x=0; x<emails.length; x++)
    {
        if(num<1)
             emails[x].checked = !emails[x].checked;
         else
              emails[x].checked = num;
    }
}

注释：javascript中0为false，非0为true。全选(1),取消全选(0),反选(2)。

☆编程中对非（!）的应用可以简化代码。

function delemail()
{
	if(!confirm( "确定删除所选邮件吗？"))
                  return;
		var emails = document.getElementsByName("email");
	
		for(var x=0; x<emails.length; x++)
		{	
			if(emails[x].checked==true)
			{
				var trNode = emails[x].parentNode.parentNode;
				trNode.parentNode.removeChild(trNode);
				x--;
			}
		}
	trcolor();
}

☆上面代码的另一种写法：

function delEmail()
{
	if(!confirm("真的要删除所选邮件吗？"))
		return;
	var emails = document.getElementsByName("email");
	var arr = new array();
	var pos = 0;
	for(var x=0; x<emails.length; x++)
	{
		if(emails[x].checked)
		{
			var trNode = emails[x].parentNode.parentNode;
			arr[pos++] = trNode;
		}
	}
	for(var x=0; x<arr.length; x++)
	{
		var trNode = arr[x];
		trNode.parentNode.removeChild(trNode);
	}
	trColor();
}

<!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,table th,table td{
	border:#F90 1px solid;

}
table{
	width:50%;
}
table th{
	background-color:#6C0;	
}
.one{
	background-color:#9FC;
}
.two{
	background-color:#9F3;
}
.over{
	background-color:#F00;
}
</style>
<script type="text/javascript">
//间隔变色加高亮
var name;
function trColor()
{
	var tabNode = document.getElementsByTagName("table")[0];
	var trs = tabNode.rows;
	for(var x = 1; x<trs.length-1; x++)
	{
		if(x%2==1)
			trs[x].className = "one";
		else
			trs[x].className = "two";
		trs[x].onmouseover = function ()
		{
			name = this.className;
			this.className = "over";	
		};
		trs[x].onmouseout = function()
		{
			this.className = name;	
		};
	}
	
}
window.onload = trcolor;

//全选复选框
function checkAll(index)
{
	var allNode = document.getElementsByName("all")[index];	
	var emails = document.getElementsByName("email");
	for(var x = 0; x<emails.length; x++)
	{
		emails[x].checked = allNode.checked;	
	}
}
//删除所选邮件
function delemail()
{
	

	if(confirm( "确定删除所选邮件吗？"))
	{
		var emails = document.getElementsByName("email");
	
		for(var x=0; x<emails.length; x++)
		{	
			if(emails[x].checked==true)
			{
				var trNode = emails[x].parentNode.parentNode;
				trNode.parentNode.removeChild(trNode);
				x--;
			}
		}
	}
	trcolor();

}
//全选按钮
function butAll()
{
	var emails = document.getElementsByName("email");
	
	for(var x=0; x<emails.length; x++)
	{
		if(emails[x].checked==false)	
			emails[x].checked = true;
	}
}
//取消全选
function delAll()
{
	var emails = document.getElementsByName("email");
	
	for(var x=0; x<emails.length; x++)
	{
		if(emails[x].checked==true)	
			emails[x].checked = false;
	}
}
//反选
function fanXuan()
{
	var emails = document.getElementsByName("email");
	for(var x=0; x<emails.length; x++)
	{
		if(emails[x].checked==true)
			emails[x].checked = false;
		else
			emails[x].checked = true;
	}
}

</script>

</head>

<body>

<table>
	<tr>
    	<th>
        	<input type="checkbox" name="all" οnclick="checkAll(0)" />全选
        </th>
        <th>
        	收件人
        </th>
    	<th>
        	邮件标题
        </th>
    </tr>
	<tr class="one" >
    	<td>
        	<input type="checkbox" name="email" />
        </td>
        <td>
        	王五01
        </td>
    	<td>
        	新的邮件
        </td>
    </tr>
	<tr class="two">
    	<td>
        	<input type="checkbox" name="email"/>
        </td>
        <td>
        	王五02
        </td>
    	<td>
        	新的邮件
        </td>
    </tr>
	<tr>
    	<td>
        	<input type="checkbox" name="email"/>
        </td>
        <td>
        	王五03
        </td>
    	<td>
        	新的邮件
        </td>
    </tr>
	<tr>
    	<td>
        	<input type="checkbox" name="email" />
        </td>
        <td>
        	王五04
        </td>
    	<td>
        	新的邮件
        </td>
    </tr>
	<tr>
    	<td>
        	<input type="checkbox" name="email"/>
        </td>
        <td>
        	王五05
        </td>
    	<td>
        	新的邮件
        </td>
    </tr>

	<tr>
    	<th>
        	<input type="checkbox" name="all" οnclick="checkAll(1)"/>全选
        </th>
        <th colspan="2">
        	<input type="button" value="全选" οnclick="butAll()"/>
            <input type="button" value="取消全选" οnclick="delAll()"/>
            <input type="button" value="反选" οnclick="fanXuan()" />
            <input type="button" value="删除所选邮件" οnclick="delemail()" />
        </th>
    </tr>

</table>

</body>
</html>

---------------------- android培训、 java培训、期待与您交流！ ----------------------详细请查看： http://edu.csdn.net/heima