看着网上的视频教程，虽说还是有点简单，但还是不免想记录下。这些操作包括（隔行变色，高亮显示，添加删除，搜索功能），而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几个方法，search方法，
split方法等等
效果体验：http://runjs.cn/detail/vm8bz8dl
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
var tb = document.getElementById('tb');
//alert(tb.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
//alert(tb.tBodies[0].rows[1].cells[1].innerHTML); //表格隔行变色和鼠标滑过高亮
var oldColor = ''; //保存原有的背景色
for (var i=;i<tb.tBodies[].rows.length;i++) {
tb.tBodies[].rows[i].style.background = i% ? '#CCC': ''; tb.tBodies[].rows[i].onmouseover = function(){
oldColor = this.style.background;
this.style.background = 'yellow';
} tb.tBodies[].rows[i].onmouseout = function(){
this.style.background = oldColor;
}
}; //添加和删除
var oBtn = document.getElementById('btn1');
var oTxt = document.getElementById('txt1');
var iNowId = tb.tBodies[].rows.length+;
oBtn.onclick = function(){
var oTr = document.createElement('tr');
var oTd = null; oTd = document.createElement('td');
oTd.innerHTML = iNowId++;
oTr.appendChild(oTd); oTd = document.createElement('td');
oTd.innerHTML = oTxt.value;
oTr.appendChild(oTd); oTd = document.createElement('td');
oTd.innerHTML ='<a href="javascript:void(0);">删除</a>';
oTr.appendChild(oTd); oTd.getElementsByTagName('a')[].onclick = function(){
tb.tBodies[].removeChild(this.parentNode.parentNode);
} tb.tBodies[].appendChild(oTr);
} //搜索功能(应该算是精确搜索)
var oBtn2 = document.getElementById('btn2');
var oTxt2 = document.getElementById('txt2');
oBtn2.onclick=function(){
for(var i=;i<tb.tBodies[].rows.length;i++){
var sValueInTb = tb.tBodies[].rows[i].cells[].innerHTML.toLowerCase();
var sValueInTxt = oTxt2.value.toLowerCase().split(' ');
if(sValueInTb==sValueInTxt){
tb.tBodies[].rows[i].style.background = 'red';
}
else{
tb.tBodies[].rows[i].style.background = '';
}
}
} //试试
var str = 'aaa blue';
var arr = str.split(' '); var str2 = 'aaa is a person';
var sFound = false;
for(var i=;i<arr.length;i++){
if(str2.search(arr[i])!=-){
sFound = true;
}
}
alert(sFound); //搜索功能（模糊查询）
var oBtn3 = document.getElementById('btn3');
var oTxt2 = document.getElementById('txt2');
oBtn3.onclick=function(){
for(var i=;i<tb.tBodies[].rows.length;i++){
var sValueInTb = tb.tBodies[].rows[i].cells[].innerHTML.toLowerCase();
var sValueInTxt = oTxt2.value.toLowerCase().split(' ');
var sFound = false;
for(var j=;j<sValueInTxt.length;j++){
if(sValueInTb.search(sValueInTxt[j])!=-){
sFound = true;
break;
}
}
if(sFound){
tb.tBodies[].rows[i].style.background = 'red';
}
else{
tb.tBodies[].rows[i].style.background = '';
} }
} }
</script>
</head> <body>
<input type="text" id="txt1">
<input type="button" id="btn1" value="添加">
<input type="text" id="txt2">
<input type="button" id="btn2" value="精确搜索"><input type="button" id="btn3" value="模糊搜索">
<table border="" width="" id="tb">
<thead>
<Tr>
<Td>ID</Td>
<Td>姓名</Td>
<Td>操作</Td>
</Tr>
</thead>
<tbody>
<tr>
<Td></Td>
<Td>abe</Td>
<Td></Td>
</tr>
<tr>
<Td></Td>
<Td>a春春</Td>
<Td></Td>
</tr>
<tr>
<Td></Td>
<Td>b一流</Td>
<Td></Td>
</tr>
<tr>
<Td></Td>
<Td>贰万</Td>
<Td></Td>
</tr>
<tr>
<Td></Td>
<Td>aaa</Td>
<Td></Td>
</tr>
<tr>
<Td></Td>
<Td>blue</Td>
<Td></Td>
</tr>
</tbody>
</table>
</body>
</html>