<!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>
摘自 代俊建的專欄
