<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM高级应用-表格、表单</title> <script type="text/javascript"> function setColor(oTab) { var oldColor = ''; for(var i=0; i<oTab.tBodies[0].rows.length;i++) { if(i % 2) { oTab.tBodies[0].rows[i].style.background = ''; } else { oTab.tBodies[0].rows[i].style.background = 'red'; } }//for } window.onload = function () { var oTab = document.getElementById('tab1'); //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML); //alert(oTab.tBodies[0].rows[0].cells[1].innerHTML); for(var i=0; i<oTab.tBodies[0].rows.length;i++) { oTab.tBodies[0].rows[i].onmouseover = function () { oldColor= this.style.background; this.style.background = 'green'; }; oTab.tBodies[0].rows[i].onmouseout = function () { this.style.background = oldColor; }; }//for setColor(oTab); for(var j=0;j<oTab.tBodies[0].rows.length;j++) { var oA = oTab.tBodies[0].rows[j].cells[3].getElementsByTagName('a')[0]; oA.onclick=function(){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); setColor(oTab); }; } //添加 var oTxt1 = document.getElementById('txt01'); var oTxt2 = document.getElementById('txt02'); var oBtn = document.getElementById('btn'); var id = oTab.tBodies[0].rows.length+1; oBtn.onclick = function(){ var oTr = document.createElement('tr'); var oTd = document.createElement('td'); oTd.innerHTML = id++; //oTd.innerHTML = 'llooooll'; oTr.appendChild(oTd); oTd = document.createElement('td'); oTd.innerHTML = oTxt1.value; oTr.appendChild(oTd); oTd = document.createElement('td'); oTd.innerHTML = oTxt2.value; oTr.appendChild(oTd); oTd = document.createElement('td'); oTd.innerHTML = '<a href="javascript:;">delete</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick=function(){ oTab.tBodies[0].removeChild(this.parentNode.parentNode); setColor(oTab); }; oTab.tBodies[0].appendChild(oTr); setColor(oTab); }; //搜索 var oTxt3 = document.getElementById('txt03'); var oBtn2 = document.getElementById('btn2'); oBtn2.onclick = function(){ setColor(oTab); var flag = false; for(var k = 0;k<oTab.tBodies[0].rows.length;k++) { var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML; if( sTab.toLowerCase() == oTxt3.value.toLowerCase()) { oTab.tBodies[0].rows[k].style.background = 'blue'; flag = true; } } if(!flag) { alert('not find!') } }; //模糊搜索 //var str = '1231231'; //return str.search('23');//找到并返回子串出现位置，如果未找到返回-1 var oTxt4 = document.getElementById('txt04'); var oBtn3 = document.getElementById('btn3'); oBtn3.onclick = function(){ setColor(oTab); var flag = false; for(var k = 0;k<oTab.tBodies[0].rows.length;k++) { var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML; if( sTab.toLowerCase().search(oTxt4.value.toLowerCase()) != -1) { oTab.tBodies[0].rows[k].style.background = 'blue'; flag = true; } } if(!flag) { alert('not find!') } }; //搜索多关键字 //var str = '1231 guo 汽车'; //str.aplit(' '); //var str = '1231,guo,汽车'; //str.aplit(','); var oTxt4 = document.getElementById('txt04'); var oBtn3 = document.getElementById('btn3'); oBtn3.onclick = function(){ setColor(oTab); var flag = false; for(var k = 0;k<oTab.tBodies[0].rows.length;k++) { var sTab = oTab.tBodies[0].rows[k].cells[1].innerHTML; var sTxt = oTxt4.value.toLowerCase(); var arr = sTxt.split(' '); for(var i =0; i< arr.length;i++) { if( sTab.toLowerCase().search(arr[i]) != -1) { oTab.tBodies[0].rows[k].style.background = 'blue'; flag = true; } } } if(!flag) { alert('not find!') } }; //利用数组sort（）方法排序 var oBtn4 = document.getElementById('btn4'); oBtn4.onclick = function(){ var arr = []; for(var i=0;i<oTab.tBodies[0].rows.length;i++) { arr[i] = oTab.tBodies[0].rows[i]; } arr.sort(function (tr1,tr2) { var n1 = parseInt(tr1.cells[0].innerHTML); var n2 = parseInt(tr2.cells[0].innerHTML); return n1-n2; }); for(var i = 0;i<arr.length;i++) { oTab.tBodies[0].appendChild(arr[i]); } }; }; </script> </head> <body> 第二项: <input id="txt01" type="text"/> 第三项: <input id="txt02" type="text"/> <input id="btn" type="button" value="add"/> <hr/> item02 search: <input id="txt03" type="text"/> <input id="btn2" type="button" value="search"/> <hr/> item02 模糊搜索: <input id="txt04" type="text"/> <input id="btn3" type="button" value="模糊搜索"/> <hr/> <input id="btn4" type="button" value="sort"/> <hr/> <table id="tab1" border="2" width="600"> <thead> <tr> <td>item01</td> <td>item02</td> <td>item03</td> <td>itemOX</td> </tr> </thead> <tbody> <tr> <td>11</td> <td>123123</td> <td>31231</td> <td><a href="javascript:;">delete</a></td> </tr> <tr> <td>23</td> <td>adasd</td> <td>adasd</td> <td><a href="javascript:;">delete</a></td> </tr> <tr> <td>24</td> <td>asd</td> <td>adas</td> <td><a href="javascript:;">delete</a></td> </tr> <tr> <td>6</td> <td>adsasd</td> <td>adasd</td> <td><a href="javascript:;">delete</a></td> </tr> <tr> <td>3</td> <td>adsad</td> <td>adasd</td> <td><a href="javascript:;">delete</a></td> </tr> </tbody> </table> </body> </html>