在学习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>
时间： 2024-08-02 11:17:34