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

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


<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行变色title>
        <script>
            window.οnlοad=function(){
                //这个变量的作用是存放之前的表格有的颜色,
                //防止鼠标移入移出进行颜色改变时,把表格的颜色都去掉
                var oldCol='';
                var oTal = document.getElementById('tab');
                //下面一行的作用是使张三这个空格变为蓝色
                //oTal.tBodies[0].rows[0].cells[1].style.backgroundColor='blue';
                for(var i=0;i0].rows.length;i++){
                    oTal.tBodies[0].rows[i].οnmοuseοver=function(){
                        oldCol=this.style.background;
                        this.style.backgroundColor='blue';
                    };
                    oTal.tBodies[0].rows[i].οnmοuseοut=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>IDtd>
                <td>姓名td>
                <td>年龄td>
            thead>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>23td>
            tr>
            <tr>
                <td>1td>
                <td>张三说td>
                <td>22td>
            tr>
            <tr>
                <td>2td>
                <td>李四过td>
                <td>23td>
            tr>
        table>
    body>
html>

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


<html>
    <head>
        <meta charset="UTF-8">
        <title>添加、删除某一行title>
        <script>
            window.οnlοad=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.οnclick=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='删除';
                    oTr.appendChild(oTd);

                    oTd.getElementsByTagName('a')[0].οnclick=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>IDtd>
                <td>姓名td>
                <td>年龄td>
                <td>操作td>
            thead>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>23td>
                <td>td>
            tr>
            <tr>
                <td>3td>
                <td>张三说td>
                <td>22td>
                <td>td>
            tr>
            <tr>
                <td>4td>
                <td>李四过td>
                <td>23td>
                <td>td>
            tr>
        table>
    body>
html>

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


<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行变色title>
        <script>
            window.οnlοad=function(){
                var name = document.getElementById('name');
                var btn = document.getElementById('btn');
                var oTal = document.getElementById('tab');
                btn.οnclick=function(){
                    for(var i=0;i0].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;jif(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>IDtd>
                <td>姓名td>
                <td>年龄td>
                <td>操作td>
            thead>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>23td>
                <td>td>
            tr>
            <tr>
                <td>3td>
                <td>Bluetd>
                <td>22td>
                <td>td>
            tr>
            <tr>
                <td>4td>
                <td>Buuntd>
                <td>23td>
                <td>td>
            tr>
        table>
    body>
html>

你可能感兴趣的:(JavaScript知识总结)