javascript 邮箱管理程序
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
/*
* javascript 邮箱管理程序
*/
//效果图:
onload = function(){
//通过标签tr获得所有的tr
var trArr = document.getElementsByTagName("tr");
//然后设置第一个和最后一个tr的背景颜色
trArr[0].style.background = "#666666";
trArr[trArr.length - 1].style.background = "#666666";
//通过tbody标签获得tbody中所有的tr
var color = null;
var arr = document.getElementsByTagName("tbody")[0].rows;
for(var x = 0; x < arr.length; x++){
//循环遍历tr,为每个tr设置背景颜色,奇数行和偶数行设置不同颜色
arr[x].style.background = x % 2 == 0 ? "#dddddd" : "#bbbbbb";
//鼠标进入tr时记住tr的颜色, 并且改为白色
arr[x].onmouseover = function(){
color = this.style.background;
this.style.background = "white";
}
// 鼠标移出时, 改回记住的颜色
arr[x].onmouseout = function(){
this.style.background = color;
}
}
}
//拿到所有复选框,循环遍历,进行判断
function changeAll(type){
var arr = document.getElementsByName("cb"); // 获取所有的checkbox
for(var x = 0; x < arr.length; x++){
switch(type){ // 根据type, 设置每一个checkbox的checked属性
//如果选中了thead中的checkbox,则把下面的也设为选中
case 0:
arr[x].checked = document.getElementById("first").checked;
break;
case 1:
arr[x].checked = true; //全选,直接设置为true
break;
case 2:
arr[x].checked = !arr[x].checked; //反选,设置为反向
break;
case 3:
arr[x].checked = false; // 取消,设置为false
break;
}
}
}
//循环遍历tr,如果选中,则拿到父级节点删除tr
function del(){
var arr = document.getElementsByName("cb");
for (var x = 0; x < arr.length; x++) { // 如果哪个被选中, 就删除哪个checkbox所在的tr
if(arr[x].checked)
arr[x].parentNode.parentNode.parentNode.removeChild(arr[x--].parentNode.parentNode);
}
formatColor(); // 重置背景颜色
}
//格式化颜色
function formatColor(){
var arr = document.getElementsByTagName("tbody")[0].rows;
for(var x = 0; x < arr.length; x++)
arr[x].style.background = x % 2 == 0 ? "#dddddd" : "#bbbbbb";
}
//按时间排序,先分割文本,然后填充到时间对象中,进行比较,排序
var times = 0;
function sort(){
var arr = document.getElementsByTagName("tbody")[0].rows;
for (var i = 0; i < arr.length - 1; i++)
for (var j = 0; j < arr.length - 1 - i; j++)
if (times % 2 == 0 ? compare(arr[j], arr[j+1]) : compare(arr[j + 1], arr[j]))
arr[j].swapNode(arr[j+1]);
formatColor();
times++;
}
function compare(tr1,tr2){
var str1 = tr1.cells[3].innerHTML;
var str2 = tr2.cells[3].innerHTML;
var arr1 = str1.split("-");
var arr2 = str2.split("-");
var date1 = new Date(arr1[0],arr1[1],arr1[2]);
var date2 = new Date(arr2[0],arr2[1],arr2[2]);
return date1.getTime() > date2.getTime();
}
</script>
</head>
<body>
<!--窗体设计-->
<table border="1" width="70%" align="center" cellpadding="5" cellspacing="0" id="table">
<thead>
<tr width="10%">
<th><input type="checkbox" onclick="changeAll(0)" id="first"></th>
<th>标 题</th>
<th>发件人</th>
<th><a href="javascript:sort()" style="text-decoration:none">时间</a></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="cb"></td>
<td>Tile1</td>
<td>张三</td>
<td>2010-6-1</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="cb"></td>
<td>Tile2</td>
<td>李四</td>
<td>2010-5-5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="cb"></td>
<td>Tile3</td>
<td>王五</td>
<td>2010-3-1</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="cb"></td>
<td>Tile4</td>
<td>赵六</td>
<td>2010-1-15</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="cb"></td>
<td>Tile5</td>
<td>钱七</td>
<td>2010-1-2</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<th colspan="4">
<input type="button" value="全选" onclick="changeAll(1)">
<input type="button" value="反选" onclick="changeAll(2)">
<input type="button" value="取消" onclick="changeAll(3)">
<input type="button" value="删除" onclick="del()">
</th>
</tr>
</tfoot>
</table>
</body>
</html>
摘自 代俊建的专栏
