表格 DOM 操作

 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     };