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

最新推荐文章于 2023-09-21 15:57:23 发布

Alex十年

最新推荐文章于 2023-09-21 15:57:23 发布

阅读量2.3k

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79555453

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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>

Alex十年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js表格中的DOM操作,隔行变色和添加、删除某一行，搜索数据

appenChild();首先要把添加的从父级删除，然后再添加到现在的位置一、隔行变色注意：表格尽量有标题，最好写上tbody. 表格中可以可以直接使用oTal.tBodies[0].rows[i]，因为tBodies可以有多个，所以返回值是个数组，而thead，tfoot只有一个，所以返回的是一个值。rows是指行，cells是指列。下面例子中有一个oldCol,这个变量的作用是存...
复制链接

扫一扫

专栏目录