《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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值