js表格中的DOM操作,隔行变色和添加、删除某一行,搜索数据

appenChild();首先要把添加的从父级删除,然后再添加到现在的位置
一、隔行变色
注意:表格尽量有标题,最好写上tbody.
表格中可以可以直接使用oTal.tBodies[0].rows[i],因为tBodies可以有多个,所以返回值是个数组,而thead,tfoot只有一个,所以返回的是一个值。rows是指行,cells是指列。
下面例子中有一个oldCol,这个变量的作用是存放之前的表格有的颜色,防止鼠标移入移出进行颜色改变时,把表格的颜色都去掉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行变色</title>
        <script>
            window.onload=function(){
                //这个变量的作用是存放之前的表格有的颜色,
                //防止鼠标移入移出进行颜色改变时,把表格的颜色都去掉
                var oldCol='';
                var oTal = document.getElementById('tab');
                //下面一行的作用是使张三这个空格变为蓝色
                //oTal.tBodies[0].rows[0].cells[1].style.backgroundColor='blue';
                for(var i=0;i<oTal.tBodies[0].rows.length;i++){
                    oTal.tBodies[0].rows[i].onmouseover=function(){
                        oldCol=this.style.background;
                        this.style.backgroundColor='blue';
                    };
                    oTal.tBodies[0].rows[i].onmouseout=function(){
                        this.style.backgroundColor=oldCol;
                    };
                    if(i%2){
                        oTal.tBodies[0].rows[i].style.backgroundColor='pink';
                    }else{
                        oTal.tBodies[0].rows[i].style.backgroundColor='gray';
                    }
                }
            };
        </script>
    </head>
    <body>
        <table id="tab" width='200' text-align=center border='1'>
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </thead>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>22</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三说</td>
                <td>22</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四过</td>
                <td>23</td>
            </tr>
        </table>
    </body>
</html>

二、删除某一行
在a标签处,外面是单引号,里面就要使用双引号,不然会出错
每创建的td都要加到tr上,然后把tr整个加到table.tBodies上,其中不要忘记写tbodies。
因为每一个行被删除了以后,这个ID尽量就不用了,所以在最开始的时候,不能仅仅使用原始表格的长度来计算,而是在没添加一次时,用一个变量来记录,使这个变量加一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>添加、删除某一行</title>
        <script>
            window.onload=function(){
                var name = document.getElementById('name');
                var age = document.getElementById('age');
                var btn = document.getElementById('btn');
                var oTal = document.getElementById('tab');
                var leg = oTal.tBodies[0].rows.length;
                btn.onclick=function(){
                    //创建tr,把创建的td都加到tr上,然后把tr加到table上
                    var oTr = document.createElement('tr');
                    leg++;
                    var oTd = document.createElement('td');
                    oTd.innerHTML=leg;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML=name.value;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML=age.value;
                    oTr.appendChild(oTd);

                    var oTd = document.createElement('td');
                    oTd.innerHTML='<a href="javascript:;">删除</a>';
                    oTr.appendChild(oTd);

                    oTd.getElementsByTagName('a')[0].onclick=function(){
                        //不要忘记tbodies
                        oTal.tBodies[0].removeChild(this.parentNode.parentNode);
                    };
                    oTal.tBodies[0].appendChild(oTr);

                }
            };
        </script>
    </head>
    <body>
        姓名:<input id='name' type="text" />
        年龄:<input id='age' type="text" />
        <input id='btn' type="button" value="添加" />
        <table id="tab" width='200' text-align=center border='1'>
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>张三说</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>李四过</td>
                <td>23</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

搜索数据
区分大小写,toLowerCase();
模糊搜索,str.search(‘a’),找到a字符在str中出现的位置,如果没有返回-1;
多关键词搜索,把输入的字符串使用split()进行分割,将得到的每一部分进行search,如果不等于-1,就变成黄色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行变色</title>
        <script>
            window.onload=function(){
                var name = document.getElementById('name');
                var btn = document.getElementById('btn');
                var oTal = document.getElementById('tab');
                btn.onclick=function(){
                    for(var i=0;i<oTal.tBodies[0].rows.length;i++){
                        var sTex = name.value.toLowerCase();
                        var sTal = oTal.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                        var arr = sTex.split(' ');
                            oTal.tBodies[0].rows[i].style.background='';
                            for(var j=0;j<arr.length;j++){
                                if(sTal.search(arr[j])!=-1){
                                oTal.tBodies[0].rows[i].style.background='yellow';
                                }
                            }                           
                    }
                };              
            };
        </script>
    </head>
    <body>
        姓名:<input id='name' type="text" />      
        <input id='btn' type="button" value="搜索" />
        <table id="tab" width='200' text-align=center border='1'>
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Blue</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Buun</td>
                <td>23</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值