<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>
以上就是javascript_13_dom_邮件列表的内容。