《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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
