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