table

来源：互联网发布：java开发三年待遇薪资编辑：程序博客网时间：2024/06/09 10:05
<!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>table{border:#3FF 1px solid;width:60%;}table th{border:#3FF 1px solid;background-color:#390;}table td{border:#3FF 1px solid;}.a{background-color:#F90;}.b{background-color:#6F9;}.c{background-color:#00F;}</style><script type="text/javascript">var name;function bcolor(){var tabNode = document.getElementsByTagName("table")[0];//alert(tabNode.tagName);var trsNode = tabNode.rowsfor(var x=1;x<trsNode.length-1;x++){if(x%2==1)trsNode[x].className = "a";elsetrsNode[x].className = "b";trsNode[x].onmouseover = function(){name = this.className;this.className = "c";};trsNode[x].onmouseout = function(){this.className = name;};}}function allCheck(x){var allcheck = document.getElementsByName("all")[x];//alert(tabNode.tagName);var mails = document.getElementsByName("mail");for(var j=0;j<mails.length;j++){mails[j].checked = allcheck.checked}}function onCheck(index){var mails = document.getElementsByName("mail");for(var j=0;j<mails.length;j++){if(index>1){mails[j].checked = !mails[j].checked}else{mails[j].checked = index;}}}function delMail(){if(confirm("你确定要删除所选的邮件吗?")){var mails = document.getElementsByName("mail");var arr = new Array();var pos = 0;for(var j=0;j<mails.length;j++){//alert(arr.length+"..."+arr[x].tagName);if(mails[j].checked){var Node = mails[j].parentNode.parentNode;arr[pos++] = Node;}}for(var x=0;x<arr.length;x++){var Node = arr[x];Node.parentNode.removeChild(Node);}bcolor();}}window.onload = function(){bcolor();}</script></head><body><table> <tr>  <th><input type="checkbox"  onchange="allCheck(0)"  name="all"/>全选</th>  <th>发件人</th>  <th>邮件内容</th> </tr>  <tr> <td><input type="checkbox"  name="mail"/></td> <td>张三11</td> <td>新的邮件</td> </tr>   <tr> <td><input type="checkbox" name="mail"/></td> <td>张三22</td> <td>新的邮件</td> </tr> <tr> <td><input type="checkbox" name="mail"/></td> <td>张三33</td> <td>新的邮件</td> </tr> <tr> <td><input type="checkbox" name="mail"/></td> <td>张三44</td> <td>新的邮件</td> </tr> <tr> <td><input type="checkbox" name="mail"/></td> <td>张三55</td> <td>新的邮件</td> </tr> <tr> <td><input type="checkbox" name="mail"/></td> <td>张三66</td> <td>新的邮件</td> </tr>  <tr>  <th><input type="checkbox"  onchange="allCheck(1)" name="all"/>全选</th>  <th colspan="2">   <input type="button" onclick="onCheck(1)" value="全选" />   <input type="button" onclick="onCheck(0)" value="取消全选" />   <input type="button" onclick="onCheck(2)" value="反选" />   <input type="button" onclick="delMail()" value="删除所选邮件" />  </th> </tr></table></body></html>
0 0