表格 DOM 操作-CSDN博客

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