Javascript_13_DOM_邮件列表
来源：互联网 发布：电子相框 知乎 编辑：程序博客网 时间：2024/05/01 20:53
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_邮件列表</title> <link rel="stylesheet" type="text/css" href="table.css"/> <style type="text/css"> .odd{ background-color:#9bf7d5; } .even{ background-color:#f3e99a; } .over{ background-color:#ef7125; } body{ margin: 0px; } </style> <script type="text/javascript"> //=========================================== //行颜色间隔显示功能。 var class_Name; function changeColor(){ //1,获取表格对象。 var oTab = document.getElementById("tab_id_1"); //2，获取行对象。 var collTr = oTab.rows; //3，对所有行进行遍历(除了第1行和最后一行)。 for(var x=1; x<collTr.length-1;x++){ if(x%2==1){ collTr[x].className = "odd"; }else{ collTr[x].className = "even"; } collTr[x].onmouseover = function(){ class_Name = this.className; this.className = "over"; } collTr[x].onmouseout = function(){ this.className = class_Name; } } } //=========================================== //文档一加载完毕就换颜色 onload = function(){ changeColor(); } //=========================================== //复选框checkbox的全选动作。 function chooseAll(oCheckbox){ //获取所有的mail复选框。 var collCheckbox = document.getElementsByName("mail"); for(var x=0; x<collCheckbox.length; x++){ collCheckbox[x].checked = oCheckbox.checked; } } //=========================================== //定义操作复选框按钮的方法。 function choose_By_Button(num){ var collCheckbox = document.getElementsByName("mail"); for(var x=0; x<collCheckbox.length; x++){ if(num>1)//2代表反选 collCheckbox[x].checked = !collCheckbox[x].checked;//反选 else//1代表全选，0代表取消 collCheckbox[x].checked = num;//全选或全部取消 } } //=========================================== //删除所选邮件。 function deleteMail(){ if (!confirm("你真的要删除所选的邮件吗？")){ return; } //获取所有的mail节点 var collCheckbox = document.getElementsByName("mail"); for (var x = 0; x < collCheckbox.length; x++) { if (collCheckbox[x].checked) { //input的父结点是td,td父结点是tr var oTr = collCheckbox[x].parentNode.parentNode; //tr父结点是tbody oTr.parentNode.removeChild(oTr); x--;//但凡remove都会改变长度！千万注意！ } } //删除完后，记得重新改变颜色！ changeColor(); } </script> </head> <body> <table id="tab_id_1"> <tr> <th> <input type="checkbox" name="all" onclick="chooseAll(this)" />全选 </th> <th> 发件人 </th> <th> 邮件名称 </th> <th> 邮件附属信息 </th> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_11 </td> <td> 我是邮件11 </td> <td> 我是附属信息11 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_22 </td> <td> 我是邮件22 </td> <td> 我是附属信息22 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_33 </td> <td> 我是邮件33 </td> <td> 我是附属信息33 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_44 </td> <td> 我是邮件44 </td> <td> 我是附属信息44 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_55 </td> <td> 我是邮件55 </td> <td> 我是附属信息55 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_66 </td> <td> 我是邮件66 </td> <td> 我是附属信息66 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_77 </td> <td> 我是邮件77 </td> <td> 我是附属信息77 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_88 </td> <td> 我是邮件88 </td> <td> 我是附属信息88 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_99 </td> <td> 我是邮件99 </td> <td> 我是附属信息99 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent_100 </td> <td> 我是邮件100 </td> <td> 我是附属信息100 </td> </tr> <tr> <td> <input type="checkbox" name="mail" /> </td> <td> pre_eminent__a </td> <td> 我是邮件_a </td> <td> 我是附属信息_a </td> </tr> <tr> <th> <input type="checkbox" name="all" onclick="chooseAll(this)" />全选 </th> <th colspan="3"> <input type="button" value="全选" onclick="choose_By_Button(1)" /> <input type="button" value="取消全选" onclick="choose_By_Button(0)" /> <input type="button" value="反选" onclick="choose_By_Button(2)" /> <input type="button" value="删除所选附件" onclick="deleteMail()" /> </th> </tr></table> </body></html>
