《JavaScript学习笔记》：表格的应用
来源：互联网 发布：linux ed2k下载工具 编辑：程序博客网 时间：2024/06/06 10:52
《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> 0 0
- 《JavaScript学习笔记》：表格的应用
- JavaScript中表格的应用
- 《JavaScript学习笔记》：Ajax的应用
- javascript学习笔记—表格的动态添加、删除，表格排序
- JavaScript学习笔记9--表格排序
- JavaScript学习笔记9--表格排序
- javascript 学习笔记之表格排序
- JavaScript学习笔记(07)之JavaScript的对象应用
- JS表格的学习笔记
- JavaScript学习笔记(1)——一个表格排序的例子
- 《JavaScript学习笔记》：获取鼠标的位置及应用
- jQuery学习笔记— jQuery对表单、表格的操作以及更多应用
- 《JavaScript高级程序设计》学习笔记（表格排序）
- Android应用开发学习笔记之表格布局
- JavaScript笔记；函数的应用
- HTML5 学习表格应用
- JavaScript的学习笔记
- javascript eval函数的应用，循环合并表格内容
- TDDL：来自淘宝的分布式数据层
- lucence 文档评分公式
- 自定义圆
- 国际化变现应用分析
- linux给文件赋权限
- 《JavaScript学习笔记》：表格的应用
- sql添加列，修改列，删除列(mysql/mssql)
- Json字符串转换为java对象的各种实现方法
- macOS 下完全卸载 Android Studio
- Java HashSet源码解析
- 嵌入式 CC2543 RF中断详解
- 百度地图zhang
- github常见操作和常见错误！错误提示：fatal: remote origin already exists.
- hdu1272 java 穷举法
