Javascript_13_DOM_邮件列表
程序员文章站
2022-05-21 10:35:02
...
Javascript_13_DOM_邮件列表
<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_邮件列表的内容，更多相关内容请关注PHP中文网（www.php.cn）！