关闭

《JavaScript学习笔记》:表格的应用

标签: javascript表格搜索
437人阅读 评论(0) 收藏 举报
分类:

《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基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分请自行上网查找,给您带来的困扰,非常抱歉。 这篇文章的主要目的是给一些自学 以及 对 ja...
  • u012967849
  • u012967849
  • 2016-07-20 14:08
  • 1953

javascript学习笔记

第一章 一、JavaScript概述 JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性(它不允许直接访问本地硬盘) 3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)。 二、JavaScript...
  • zhoulenihao
  • zhoulenihao
  • 2013-09-04 23:04
  • 4096

js学习笔记(比较全)

什么是JavaScript? 1. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)。 2. JavaScript 通常被直接嵌入 HTML 页面。 3. JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。 特点: 1....
  • jiangzhongwei_
  • jiangzhongwei_
  • 2016-07-22 20:12
  • 601

在JavaScript中创建表格

情境:点击搜索按钮之后,原来没有数据的表格一下就多了好多数据。 分析:数据的获取肯定是从后台得到的,但是表格的创建以及表格的属性则是在JavaScript中完成的。 步骤归纳:1.for循环完成对多组数据的重复设置。  2.对每组数据来说,需要得到数据的值,还需要为这组数据新添一行。...
  • qq_32925269
  • qq_32925269
  • 2017-05-10 15:54
  • 175

JavaScript获取表格中的值

JavaScript获取表格中的值
  • zhanyouwen
  • zhanyouwen
  • 2016-05-31 18:53
  • 1707

javascript document 对表格进行添加新行,删除添加的行

作者:hyzhang 时间:2017-10-11 描述:document 对表格进行添加删除操作 --> /*tr:hover{ color: yellow; }*/ window.onload=function(){ var etable = do...
  • hyzhang6
  • hyzhang6
  • 2017-10-12 10:05
  • 265

JavaScript中表格的应用

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档td { text-align:left;}--> function...
  • wangmin06jb12
  • wangmin06jb12
  • 2010-01-05 15:26
  • 124

用javascript设置嵌套表格的显示和隐藏

 function setdiv(divname) {    var obj = document.getElementById(divname);    if (obj.style.display == "none&q...
  • tcmis
  • tcmis
  • 2006-11-24 10:20
  • 1932

【机器学习-斯坦福】学习笔记1 - 机器学习的动机与应用

开始看Andrew Ng的经典课程机器学习,随堂做的学习笔记 机器学习的动机与应用 工具:需正版:Matlab,免费:Octave   定义(Arthur Samuel 1959): 在不直接针对问题进行编程的情况下,赋予计算机学习能力的研究领域。 例:Arthur的下棋程序,计算走每一步...
  • maverick1990
  • maverick1990
  • 2013-08-29 17:23
  • 16641

Html中JavaScript对表格的控制,行和列的增删

初学者,如若有错的地方欢迎指正,定当虚心听教。 以下为例子: 第一行第一列 第一行第二列 第二行第一列 第二行第二列 function add() { var getTable = document.getElementById(&q...
  • ArdenSrilank
  • ArdenSrilank
  • 2017-02-15 20:25
  • 557
    个人资料
    • 访问:700330次
    • 积分:12694
    • 等级:
    • 排名:第1306名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:115条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论