js表格中的DOM操作,隔行变色和添加、删除某一行，搜索数据
appenChild();首先要把添加的从父级删除，然后再添加到现在的位置
一、隔行变色
注意：表格尽量有标题，最好写上tbody.
表格中可以可以直接使用oTal.tBodies[0].rows[i]，因为tBodies可以有多个，所以返回值是个数组，而thead，tfoot只有一个，所以返回的是一个值。rows是指行，cells是指列。
下面例子中有一个oldCol,这个变量的作用是存放之前的表格有的颜色，防止鼠标移入移出进行颜色改变时，把表格的颜色都去掉
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色title>
<script>
window.οnlοad=function(){
//这个变量的作用是存放之前的表格有的颜色，
//防止鼠标移入移出进行颜色改变时，把表格的颜色都去掉
var oldCol='';
var oTal = document.getElementById('tab');
//下面一行的作用是使张三这个空格变为蓝色
//oTal.tBodies[0].rows[0].cells[1].style.backgroundColor='blue';
for(var i=0;i0 ].rows.length;i++){
oTal.tBodies[0].rows[i].οnmοuseοver=function(){
oldCol=this.style.background;
this.style.backgroundColor='blue';
};
oTal.tBodies[0].rows[i].οnmοuseοut=function(){
this.style.backgroundColor=oldCol;
};
if(i%2){
oTal.tBodies[0].rows[i].style.backgroundColor='pink';
}else{
oTal.tBodies[0].rows[i].style.backgroundColor='gray';
}
}
};
script>
head>
<body>
<table id="tab" width='200' text-align=center border='1'>
<thead>
<td>IDtd>
<td>姓名td>
<td>年龄td>
thead>
<tr>
<td>1td>
<td>张三td>
<td>22td>
tr>
<tr>
<td>2td>
<td>李四td>
<td>23td>
tr>
<tr>
<td>1td>
<td>张三说td>
<td>22td>
tr>
<tr>
<td>2td>
<td>李四过td>
<td>23td>
tr>
table>
body>
html>二、删除某一行
在a标签处，外面是单引号，里面就要使用双引号，不然会出错
每创建的td都要加到tr上，然后把tr整个加到table.tBodies上，其中不要忘记写tbodies。
因为每一个行被删除了以后，这个ID尽量就不用了，所以在最开始的时候，不能仅仅使用原始表格的长度来计算，而是在没添加一次时，用一个变量来记录，使这个变量加一
<html>
<head>
<meta charset="UTF-8">
<title>添加、删除某一行title>
<script>
window.οnlοad=function(){
var name = document.getElementById('name');
var age = document.getElementById('age');
var btn = document.getElementById('btn');
var oTal = document.getElementById('tab');
var leg = oTal.tBodies[0].rows.length;
btn.οnclick=function(){
//创建tr,把创建的td都加到tr上，然后把tr加到table上
var oTr = document.createElement('tr');
leg++;
var oTd = document.createElement('td');
oTd.innerHTML=leg;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=name.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=age.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML='删除';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].οnclick=function(){
//不要忘记tbodies
oTal.tBodies[0].removeChild(this.parentNode.parentNode);
};
oTal.tBodies[0].appendChild(oTr);
}
};
script>
head>
<body>
姓名：<input id='name' type="text" />
年龄：<input id='age' type="text" />
<input id='btn' type="button" value="添加" />
<table id="tab" width='200' text-align=center border='1'>
<thead>
<td>IDtd>
<td>姓名td>
<td>年龄td>
<td>操作td>
thead>
<tr>
<td>1td>
<td>张三td>
<td>22td>
<td>td>
tr>
<tr>
<td>2td>
<td>李四td>
<td>23td>
<td>td>
tr>
<tr>
<td>3td>
<td>张三说td>
<td>22td>
<td>td>
tr>
<tr>
<td>4td>
<td>李四过td>
<td>23td>
<td>td>
tr>
table>
body>
html>搜索数据
区分大小写，toLowerCase（）；
模糊搜索，str.search(‘a’),找到a字符在str中出现的位置，如果没有返回-1；
多关键词搜索，把输入的字符串使用split（）进行分割，将得到的每一部分进行search,如果不等于-1，就变成黄色
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色title>
<script>
window.οnlοad=function(){
var name = document.getElementById('name');
var btn = document.getElementById('btn');
var oTal = document.getElementById('tab');
btn.οnclick=function(){
for(var i=0;i0 ].rows.length;i++){
var sTex = name.value.toLowerCase();
var sTal = oTal.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var arr = sTex.split(' ');
oTal.tBodies[0].rows[i].style.background='';
for(var j=0;jif(sTal.search(arr[j])!=-1){
oTal.tBodies[0].rows[i].style.background='yellow';
}
}
}
};
};
script>
head>
<body>
姓名：<input id='name' type="text" />
<input id='btn' type="button" value="搜索" />
<table id="tab" width='200' text-align=center border='1'>
<thead>
<td>IDtd>
<td>姓名td>
<td>年龄td>
<td>操作td>
thead>
<tr>
<td>1td>
<td>张三td>
<td>22td>
<td>td>
tr>
<tr>
<td>2td>
<td>李四td>
<td>23td>
<td>td>
tr>
<tr>
<td>3td>
<td>Bluetd>
<td>22td>
<td>td>
tr>
<tr>
<td>4td>
<td>Buuntd>
<td>23td>
<td>td>
tr>
table>
body>
html>