获取
tBodies、tHead、tFoot、rows、cells
隔行变色
鼠标移入高亮
添加、删除一行
DOM方法的使用
添加、删除
<script>
window.onload=function (){
/*var str='abcdef';
alert(str.search('g')); //找到并且返回字符串出现的位置，如果没找到-1
*/
/*
var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);
*/
/*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);*/ //表格隔行变色
var oTab=document.getElementById('tab1');
//alert(oTab.rows.length);
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
if(i%2==1){ oTab.tBodies[0].rows[i].style.background=''; }
else{oTab.tBodies[0].rows[i].style.background='#ccc'; }
//鼠标经过时颜色的改变
oTab.tBodies[0].rows[i].onmouseover=function ()
{
oBgColor=this.style.background;
this.style.background='green';
}
oTab.tBodies[0].rows[i].onmouseout=function ()
{
this.style.background=oBgColor;
} }
// 增加，删除
var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var id=oTab.tBodies[0].rows.length+1;
oBtn.onclick=function ()
{
var oTr = document.createElement('tr'); var oTd=document.createElement('td');
oTd.innerHTML=id++ //oTab.tBodies[0].rows.length+1;//添加 ID
oTr.appendChild(oTd); var oTd=document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd); var oTd=document.createElement('td');
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd); var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick=function ()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
} oTab.tBodies[0].appendChild(oTr);
} }
</script>
</head> <body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" /> <table id="tab1" border="1" width="500"> <thead> <td> ID</td>
<td> 姓名</td>
<td> 年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td> 2</td>
<td> Mrs.Jimmy</td>
<td> 17</td>
<td></td>
</tr> <tr>
<td> 3</td>
<td> 张三</td>
<td> 27</td><td></td>
</tr> <tr>
<td> 1</td>
<td> 李斯</td>
<td> 32</td><td></td>
</tr> <tr>
<td> 4</td>
<td> 李四</td>
<td> 12</td><td></td>
</tr> <tr>
<td> 5</td>
<td> Mr.ZhiNiao</td>
<td> 12</td><td></td>
</tr> </tbody> </table>
</body>
搜索
搜索
版本1：基础版本——字符串比较
版本2：忽略大小写——toLowerCase大小写转换
版本3：模糊搜索——search的使用
版本4：多关键词——split
<script>
window.onload=function (){ var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn1');
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();//toLowerCase()函数忽略大小
var sTxt=oTxt.value.toLowerCase();
//alert(sTab.search(sTxt));//search 匹配到模糊字段，打印为 0 ，没有匹配为 -1
/* if(sTab.search(sTxt)!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
*/
//多关键字筛选
//var str = 'abc c her';
//alert(str.split(' '));
var arr=sTxt.split(' ');//分隔带空格的字符串
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
} } }
</script>
</head> <body>
姓名：<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" /> <table id="tab1" border="1" width="500"> <thead>
<td> ID</td>
<td>姓名</td>
<td> 年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td> 2</td>
<td>Mrs.Jimmy</td>
<td> 17</td>
<td></td>
</tr> <tr>
<td> 3</td>
<td>张三</td>
<td> 27</td><td></td>
</tr> <tr>
<td> 1</td>
<td>李斯</td>
<td> 32</td><td></td>
</tr> <tr>
<td> 4</td>
<td>李四</td>
<td> 12</td><td></td>
</tr> <tr>
<td> 5</td>
<td>Mr.ZhiNiao</td>
<td> 12</td><td></td>
</tr> </tbody> </table>
</body>