标签：
在学习Javascript的过程中，首先遇到的便是对对象数据类型和对象函数的理解不够清晰透彻。这个需要的就只是多实践，写代码的时候仔细脑际每一个变量被赋予的数据类型和对象。
在这次实践中对该Table实现的功能有：隔行变色，列的添加和删除（子节点），鼠标移入移出变色事件，关键字查找，分类具体查找，关键字模糊查找，多关键字查找。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Table操作</title> <script> window.onload=function() { var oTab=document.getElementById(‘tab1‘); var oTr=oTab.tBodies[0].getElementsByTagName(‘tr‘); var oName=document.getElementById(‘name‘); var oAge=document.getElementById(‘age‘); var oSign=document.getElementById(‘sign‘); var oBtn=document.getElementById(‘btn‘); var bColor=‘‘; var bRank=oTab.tBodies[0].rows.length+1; /*alert(oTd.length);*/ /*创建删除列*/ oBtn.onclick=function() { var oNewTr=document.createElement(‘tr‘); var oNewRank=document.createElement(‘td‘); oNewRank.innerHTML=bRank++; oNewTr.appendChild(oNewRank); var oNewName=document.createElement(‘td‘); oNewName.innerHTML=oName.value; oNewTr.appendChild(oNewName); var oNewAge=document.createElement(‘td‘); oNewAge.innerHTML=oAge.value; oNewTr.appendChild(oNewAge); var oNewSign=document.createElement(‘td‘); oNewSign.innerHTML=oSign.value; oNewTr.appendChild(oNewSign); var oNewDel=document.createElement(‘td‘); oNewDel.innerHTML=‘<a href="javascript:;">删除</a>‘; oNewTr.appendChild(oNewDel); /*新建行外观设置*/ oNewTr.onmouseover=function() { bColor=this.style.background;/*为什么用this可以，而用oTr[i]不行？*/ this.style.background="#FF0"; }; oNewTr.onmouseout=function() { this.style.background=bColor; }; if(bRank%2) { oNewTr.style.background="#FF9"; } else { oNewTr.style.background=""; } oNewTr.getElementsByTagName(‘a‘)[0].onclick=function() { oTab.tBodies[0].removeChild(this.parentNode.parentNode); }; /*oTab.getElementsByTagName(‘body‘).appendChild(oNewTr);*/ oTab.tBodies[0].appendChild(oNewTr); }; for(var i=0;i<oTr.length;i++) { oTr[i].onmouseover=function() { bColor=this.style.background;/*为什么用this可以，而用oTr[i]不行？*/ this.style.background="#FF0"; }; oTr[i].onmouseout=function() { this.style.background=bColor; }; if(i%2) { oTr[i].style.background="#FF9"; } else { oTr[i].style.background=""; } oTr[i].getElementsByTagName(‘a‘)[0].onclick=function() { oTab.tBodies[0].removeChild(this.parentNode.parentNode); }; } /*搜索列*/ var oBse=document.getElementById(‘bse‘); oBse.onclick=function() { var RankCol=‘‘; var oTse=document.getElementById(‘search‘); var oSe=document.getElementById(‘sel‘); var oHtd=oTab.getElementsByTagName(‘thead‘)[0].getElementsByTagName(‘tr‘)[0].getElementsByTagName(‘td‘); var Sindex =oSe.selectedIndex; // 选中索引 var Stext =oSe.options[Sindex].text; // 选中文本 /*alert(oHtd[0].innerHTML);*/ for(var i=0;i<oHtd.length;i++) { if(oHtd[i].innerHTML==Stext) { RankCol=i; break; } } /*alert(oTab.tBodies[0].rows[2].cells[RankCol].innerHTML)*/ /*alert(oTse.value.toLowerCase());*/ for(var i=0;i<oTab.tBodies[0].rows.length;i++) { var str1=oTab.tBodies[0].rows[i].cells[RankCol].innerHTML.toLowerCase(); var str2=oTse.value.toLowerCase(); var arr=str2.split(‘ ‘); for(var j=0;j<arr.length;j++) { var t=str1.indexOf(arr[j]); if(t!=-1) { oTab.tBodies[0].rows[i].style.background="#FF0"; } } } }; }; </script> </head> <body> 姓名：<input type="text" id="name"/> 年龄：<input type="text" id="age"/> 签到：<input type="text" id="sign"/> <input type="button" id="btn" value="创建" /><br /> 关键字：<input type="text" id="search" /> 分类： <select id="sel"> <option value="rank">编号</option> <option value="name" selected="selected">姓名</option> <option value="age">年龄</option> <option value="sign">签到</option> </select> <input type="button" id="bse" value="搜索" /> <span style="font-size:12px;color:#999;font-family:Arial, Helvetica, sans-serif;"> //搜索结果高亮显示,可忽略大小写，字符串模糊匹配搜索</span><br /> <table id="tab1" border="1" style="border:1px solid #3FC;width:400px; height:35px; margin-top:200px;"> <thead> <tr> <td >编号</td> <td >姓名</td> <td >年龄</td> <td >签到</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>王大</td> <td>23</td> <td>17</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>2</td> <td>李二</td> <td>18</td> <td>21</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>3</td> <td>张三</td> <td>25</td> <td>23</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>4</td> <td>刘四</td> <td>35</td> <td>18</td> <td><a href="javascript:;">删除</a></td> </tr> </tbody> </table> </body> </html>
以Table表为框架，在HTML中实现数据列的添加，删除，查找功能
标签：
原文地址：http://www.cnblogs.com/baishu957/p/4760232.html
