《JavaScript学习笔记》：表格的应用
《JavaScript学习笔记》：表格的应用
在操作表格相关的节点时，
按照一般的获取节点的方法，我们可能会这么写：
var tb=document.getElementById(‘tb1’);//tb1为表格的id值
tb.getElementsByTagName(‘tbody’);//这样获得了表格对象tb下面所有的tbody节点对象
而如果我们想获取第一个tbody节点下的tr节点，我们可能会这么写
tb.getElementsByTagName(‘tbody’)[0].getElementsByTagName(‘tr’);
在DOM中，为表格提供了一些获取节点的简单方法
1、tBodies：获取表格对象下面的tbody对象的数组
var aTbody=tb.tBodies;//tb为table对象，
这样就获取到了table下面的所有tbody节点，与最上面获取节点的方法相比，是不是简洁了许多。
2、rows：获取表格对象某个tbody对象的行数
3、cells：列数
4、tFoot：表尾
5、tHead：表头
下面来看几个关于表格的例子哈。分别为：
1、实现鼠标移入表格某一行时，该行变红，移出这一行时变为原来的颜色
2、为表格添加行数据、删除行数据
1、实现鼠标移入表格某行，该行变红
下面看一个例子：有一个表格，当我们鼠标移入某一行时，这一行变为红色，移出这一行就变为原来的颜色。
比较简单哈，看代码
<!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=gb2312" />
<title>表格1:移入变色，移出恢复为原来的颜色</title>
<script> window.onload=function() { var oTB=document.getElementById('tb1'); var aTr=oTB.tBodies[0].rows;//这行语句与这行相同：var aTr=oTB.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); //alert(aTr.length);//结果为：6 for(var i=0;i<aTr.length;i++) { var originColor=null; aTr[i].onmouseover=function() { originColor=this.style.background;//先保存表格当前行的颜色 this.style.background='red'; }; aTr[i].onmouseout=function() { this.style.background=originColor; }; } }; </script>
</head>
<body>
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>78</td>
<td>87</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>77</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>好六</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td>5</td>
<td>让七</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>吴八</td>
<td>89</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>2、给表格添加行数据
如果表格是一个空表，给表格添加数据如下：
<!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=gb2312" />
<title>表格1:给表格添加一行数据</title>
<script> window.onload=function() { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn = document.getElementById('btn1'); var oTB=document.getElementById('tb1'); var id=1; var oTbody=oTB.tBodies[0]; oBtn.onclick=function() { var oTr=document.createElement('tr'); var oTd1=document.createElement('td'); //学号 oTd1.innerHTML=id++; oTr.appendChild(oTd1); //姓名 var oTd2=document.createElement('td'); oTd2.innerHTML=txt1.value; oTr.appendChild(oTd2); //成绩 var oTd3=document.createElement('td'); oTd3.innerHTML=txt2.value; oTr.appendChild(oTd3); oTbody.appendChild(oTr); }; }; </script>
</head>
<body>
<input id ="txt1" type="text" />
<input id ="txt2" type="text" />
<input id="btn1" type="button" value="添加一行数据" />
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>3、删除表格的某行数据
给表格指定一列名为”操作“的列，用于可以方便的删除任意行。
<!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=gb2312" />
<title>表格:给表格添加一行数据</title>
<script> window.onload=function() { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn = document.getElementById('btn1'); var oTB=document.getElementById('tb1'); var id=1; var oTbody=oTB.tBodies[0]; oBtn.onclick=function() { var oTr=document.createElement('tr'); var oTd1=document.createElement('td'); //学号 oTd1.innerHTML=id++; oTr.appendChild(oTd1); //姓名 var oTd2=document.createElement('td'); oTd2.innerHTML=txt1.value; oTr.appendChild(oTd2); //成绩 var oTd3=document.createElement('td'); oTd3.innerHTML=txt2.value; oTr.appendChild(oTd3); var oTd4=document.createElement('td'); oTd4.innerHTML='<a href="javascript:;">删除</a>'; oTr.appendChild(oTd4); //为这个 链接中的‘删除’添加点击事件 oTd4.getElementsByTagName('a')[0].onclick=function() { //下面两行的功能一样 //this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);//不行 oTbody.removeChild(this.parentNode.parentNode); }; oTbody.appendChild(oTr); }; }; </script>
</head>
<body>
<input id ="txt1" type="text" />
<input id ="txt2" type="text" />
<input id="btn1" type="button" value="添加一行数据" />
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>4、搜索
4、1完全匹配搜索
完全匹配搜索就是：只有当搜索的内容完全一致时，才算是匹配到的结果。
<!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=gb2312" />
<title>表格:搜索</title>
<script> window.onload=function() { var oTB=document.getElementById('tb1'); var oTbody=oTB.tBodies[0]; var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var val=oTxt.value; var aTr=oTB.tBodies[0].rows;//这行语句与这行相同：var aTr=oTB.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); //alert(aTr.length);//结果为：6 for(var i=0;i<aTr.length;i++) { aTr[i].style.background=''; var aTd=aTr[i].getElementsByTagName('td')[1]; if(aTd.innerHTML==oTxt.value) //这样就完全一个匹配搜索 { aTr[i].style.background='red'; } } } }; </script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>78</td>
<td>87</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>77</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>好六</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td>5</td>
<td>让七</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>吴八</td>
<td>89</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>4.2、包含搜索
包含搜索指的就是：只要内容包含有搜索的内容，就算是一种匹配的结果。
例如：要搜索的内容为:”张”
则在表格中某行内容包含有：”张”这个字符就算是匹配，显示出来。
主要的知识点为：str.indexOf(target)!=-1
具体代码如下：
<!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=gb2312" />
<title>表格:搜索</title>
<script> window.onload=function() { var oTB=document.getElementById('tb1'); var oTbody=oTB.tBodies[0]; var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var val=oTxt.value; var aTr=oTB.tBodies[0].rows;//这行语句与这行相同：var aTr=oTB.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); //alert(aTr.length);//结果为：6 for(var i=0;i<aTr.length;i++) { aTr[i].style.background=''; var aTd=aTr[i].getElementsByTagName('td')[1]; if(aTd.innerHTML.indexOf(oTxt.value)!=-1) //判断字符串是否包含搜索的内容，如果包含，则变为红色 { aTr[i].style.background='red'; } } } }; </script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>78</td>
<td>87</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>77</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>好六</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td>5</td>
<td>让七</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>张八</td>
<td>89</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>4.3、多关键字搜索
在我们常见的搜索引擎中，有支持多关键字搜索，就我们输入多个关键字，内容只要匹配一个及多个关键字就显示出来。
<!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=gb2312" />
<title>表格:搜索</title>
<script> window.onload=function() { var oTB=document.getElementById('tb1'); var oTbody=oTB.tBodies[0]; var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var val=oTxt.value; var aTr=oTB.tBodies[0].rows;//这行语句与这行相同：var aTr=oTB.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); //alert(aTr.length);//结果为：6 for(var i=0;i<aTr.length;i++) { aTr[i].style.background=''; var aTd=aTr[i].getElementsByTagName('td')[1]; var aStr=oTxt.value.trim().split(' ');//先利用空格将字符串分开,aStr可能有空字符串（str='a b'.split(' ')结果就含有空字符串） for(var j=0;j<aStr.length;j++) { if(aStr[j]!=''&&aTd.innerHTML.indexOf(aStr[j])!=-1) //判断字符串是否包含搜索的内容，如果包含，则变为红色 { aTr[i].style.background='red'; } } } } }; </script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tb1" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>78</td>
<td>87</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>77</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>好六</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td>5</td>
<td>让七</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>张八</td>
<td>89</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>