1 window.onload = function() {
2 var oTb = document.getElementById("tb1");
3
4 //隔行变色
5 for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
6 oTb.tBodies[0].rows[i].style.background = i % 2 ? "#ccc" : "";
7 oTb.tBodies[0].rows[i].index = i;
8
9 oTb.tBodies[0].rows[i].onmouseover = function() {
10 this.style.background = "red";
11 };
12 oTb.tBodies[0].rows[i].onmouseout = function() {
13 this.style.background = this.index % 2 ? "#ccc" : "";;
14 };
15 }
16
17 //增加删除行
18 var btnAdd = document.getElementById("btnAdd");
19 oTb.nowId = oTb.tBodies[0].rows.length + 1;
20 btnAdd.onclick = function() {
21 var oTr = document.createElement("tr");
22 var oTd = null;
23
24 oTd = document.createElement("td");
25 oTd.innerHTML = oTb.nowId++;
26 oTr.appendChild(oTd);
27
28 oTd = document.createElement("td");
29 oTd.innerHTML = txtAdd.value;
30 oTr.appendChild(oTd);
31
32 oTd = document.createElement("td");
33 oA = document.createElement("a");
34 oA.innerHTML = "删除";
35 oA.href = "javascript:void(0)"
36 oA.onclick = function() {
37 oTb.tBodies[0].removeChild(this.parentNode.parentNode);
38 };
39 oTd.appendChild(oA);
40 oTr.appendChild(oTd);
41
42 oTb.tBodies[0].appendChild(oTr);
43 };
44
45 //搜索
46 var btnSearch = document.getElementById("btnSearch");
47 var txtSearch = document.getElementById("txtSearch");
48 btnSearch.onclick = function() {
49 for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
50 var tbValue = oTb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
51 var txtValue = txtSearch.value.toLowerCase();
52 var arr = txtValue.split(' ');
53 var bFound = false;
54 for (var j = 0; j < arr.length; j++) {
55 if (tbValue.search(arr[j]) != -1) {
56 bFound = true;
57 break;
58 }
59 }
60 if (bFound)
61 oTb.tBodies[0].rows[i].style.background = "#234233";
62 }
63 };
64
65 //排序
66 var btnSort = document.getElementById("btnSort");
67
68 //点击之后顺序逆序切换排序
69 var isAsc = true;
70
71 btnSort.onclick = function() {
72
73 //1. 转换成数组
74 var arr = [];
75 for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
76 arr[i] = oTb.tBodies[0].rows[i];
77 }
78
79 //2. 数组排序
80 arr.sort(function(tr1, tr2) {
81 return isAsc ?
82 parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML) :
83 parseInt(tr2.cells[0].innerHTML) - parseInt(tr1.cells[0].innerHTML);
84 });
85
86 //3. 重新插入
87 for (var i = 0; i < arr.length; i++) {
88 oTb.tBodies[0].appendChild(arr[i]);
89 }
90
91 //取反
92 isAsc = !isAsc;
93 };
94 };
