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

最新推荐文章于 2024-06-06 01:46:25 发布

HelloWorld_EE

最新推荐文章于 2024-06-06 01:46:25 发布

阅读量663

点赞数

分类专栏： javascript 文章标签： javascript 表格搜索

本文链接：https://blog.csdn.net/u010412719/article/details/51554561

版权

javascript 专栏收录该内容

22 篇文章 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>

HelloWorld_EE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记》：表格的应用

《JavaScript学习笔记》：表格的应用在操作表格相关的节点时，按照一般的获取节点的方法，我们可能会这么写：var tb=document.getElementById(‘tb1’);//tb1为表格的id值 tb.getElementsByTagName(‘tbody’);//这样获得了表格对象tb下面所有的tbody节点对象而如果我们想获取第一个tbody节点下的tr节点，我们可能会这
复制链接

扫一扫

专栏目录