DOM20---邮件列表的应用

来源：互联网发布：hive sql与sql区别编辑：程序博客网时间：2024/06/01 16:47
涉及到的知识点有：
1、背景色间隔高亮显示
2、全选，取消选择，返选的实现
3、删除行，确认对话框的应用
如下图所示：
<html><head><meta http-equiv="Content-Type" content="text/html;charset=GBK"><link rel="stylesheet" type="text/css" href="table.css"><title></title><style type="text/css">.one{background-color:#9bf7d5;}.two{background-color:#f3e99a;}.over{background-color:#ef7125;}</style><script type="text/javascript">function getSum(){/*获取所有名称为item的复选框，判断checked状态，为true表示被先中，获取该节点的value进行累加*/var sum = 0;var collItemNodes = document.getElementsByName("item");for(var i=0;i<collItemNodes.length;i++){if(collItemNodes[i].checked){sum += parseInt(collItemNodes[i].value); }}var sSum = sum+"元";document.getElementById("sumid").innerHTML = sSum.fontcolor('red');}//全选function checkAll(node){/*遍历所有的选项,然后把它们的选中状态设置成与全选按钮一样的状态就可以*/var collMailNodes = document.getElementsByName("mail");for(var i=0;i<collMailNodes.length;i++){collMailNodes[i].checked = node.checked;}}//行颜色间隔显示功能var name;function trColor(){//1、获取表格对象var oMailTab = document.getElementById("mailtable");//2、获取行对象var collTrNodes = oMailTab.rows;//3、对所有需要设置背景的行对象进行遍历for(var i=1;i<collTrNodes.length-1;i++){if(i%2==1){collTrNodes[i].className="one";}else{collTrNodes[i].className="two";}collTrNodes[i].onmouseover = function(){name = this.className;this.className="over";}collTrNodes[i].onmouseout = function(){this.className=name;}}}//定义按钮的操作,全选，取消，返选，这里的一个技巧是，如果大于1，取返，如果是0或1，则checked的值跟传进的数字一样function checkAllByButton(num){var collMailNodes = document.getElementsByName("mail");for(var i=0;i<collMailNodes.length;i++){if(num>1){collMailNodes[i].checked = !collMailNodes[i].checked;}else{collMailNodes[i].checked = num;}}}//删除所选邮件function deleteMail(){if(confirm("确定要删除所选中的邮件吗？")){var collMailNodes = document.getElementsByName("mail");for(var i=0;i<collMailNodes.length;i++){if(collMailNodes[i].checked ==true){var oTrNode = collMailNodes[i].parentNode.parentNode;oTrNode.parentNode.removeChild(oTrNode);//remove后长度变小，所以要i--i--;}}trColor();//如果删除的为同一颜色时需要重新更改背景颜色}}onload = function(){trColor();}</script></head><body><table id="mailtable"><tr><th><input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/></th><th>发件人</th><th>邮件名称</th><th>邮件附属信息</th></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三01</td><td>我是张三01</td><td>附属信息01</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三02</td><td>我是张三02</td><td>附属信息02</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三03</td><td>我是张三03</td><td>附属信息03</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三04</td><td>我是张三04</td><td>附属信息04</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三05</td><td>我是张三05</td><td>附属信息05</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三06</td><td>我是张三06</td><td>附属信息06</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三07</td><td>我是张三07</td><td>附属信息07</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三08</td><td>我是张三08</td><td>附属信息08</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三09</td><td>我是张三09</td><td>附属信息09</td></tr><tr><td><input type="checkbox" name="mail"/></td><td>张三10</td><td>我是张三10</td><td>附属信息10</td></tr><tr><td><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</td><td colspan="3"><input type="button" value="全选" onclick="checkAllByButton(1)"/><input type="button" value="取消" onclick="checkAllByButton(0)"/><input type="button" value="返选" onclick="checkAllByButton(2)"/><input type="button" value="删除附件信息" onclick="deleteMail()"/></td></tr></table></body></html>