<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script> window.onload=function() { var oTab=document.getElementById("tab1"); // alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); // //表格可以簡便寫成下面的 // alert(oTab.tBodies[0].rows[1].cells[1].innerHTML); // // // 隔行變色 for(var i=0;i<oTab.tBodies[0].rows.length;i++) { var col1=''; //儲存當前標題欄的顏色 oTab.tBodies[0].rows[i].onmouseover=function() { col1=this.style.background; //先把當前的顏色存儲起來 this.style.background="red"; //當移動到其中的td標簽上顯示紅色 } oTab.tBodies[0].rows[i].onmouseout=function()//當離開td時候，變回原來的顏色 { this.style.background=col1; } if (i%2)//隔行變色 { oTab.tBodies[0].rows[i].style.background="#ccc"; } else { oTab.tBodies[0].rows[i].style.background=""; } } //增加一個li var name =document.getElementById("name"); var age =document.getElementById("age"); var add=document.getElementById("btn"); var num=oTab.tBodies[0].rows.length+1;//先增加row 的長度 add.onclick=function() { var newRow= document.createElement("tr"); //增加新的一行 var newCell0=document.createElement("td"); //增加新的一列 newCell0.innerHTML=num++; newRow.appendChild(newCell0); var newCell1=document.createElement("td"); //再增加一列 newCell1.innerHTML=name.value; //text上的值 newRow.appendChild(newCell1); var newCell2=document.createElement("td"); //再增加一列 newCell2.innerHTML=age.value; //text的值 newRow.appendChild(newCell2); var newCell3=document.createElement("td"); //增加一列 newCell3.innerHTML="<a href='javascript:;'>刪除</a>"; //加入刪除標簽 newRow.appendChild(newCell3); oTab.tBodies[0].appendChild(newRow); // 把這行放入body上 newCell3.getElementsByTagName("a")[0].onclick=function() //當點解刪除標簽刪除tr節點 { oTab.tBodies[0].removeChild(this.parentNode.parentNode); //this為a標簽 this.parentNode為td this.parentNode.parentNode為tr } } //搜索功能 var oTex=document.getElementById("search1"); var oBtn=document.getElementById("btn2"); oBtn.onclick=function() { for(var i=0;i<oTab.tBodies[0].rows.length;i++) { var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//行中名字的值並轉化成小寫 var sTex=oTex.value.toLowerCase(); //用戶輸入的值並轉化成小寫 var arr=sTex.split(' ');//如果用戶用空格隔開關鍵字 oTab.tBodies[0].rows[i].style.background='';//把所有的背景都設置為空 //如果刷選，把css換成block顯示就行 for(var j=0;j<arr.length;j++) { if (sTab.search(arr[j])!=-1) //調用search函數查找截取出來的字符數組，判斷是否存在， { oTab.tBodies[0].rows[i].style.background="yellow";//存在改變td的顏色 } } } } }; </script> </head> <body> 姓名：<input type="text" id="name"> 年齡：<input type="text" id="age"> <input type="button" value="add" id="btn"/> <table border="1" width="500px" id="tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年齡</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Bule</td> <td>27</td> <td></td> </tr> <tr> <td>2</td> <td>張三</td> <td>23</td> <td></td> </tr> <tr> <td>3</td> <td>李四</td> <td>28</td> <td></td> </tr> <tr> <td>4</td> <td>王五</td> <td>25</td> <td></td> </tr> <tr> <td>5</td> <td>張偉</td> <td>25</td> <td></td> </tr> </tbody> </table> 搜素姓名：<input type="text" id="search1" /> <input type="button" value="搜素" id="btn2" /> </body> </html>