DOM高级应用

表格应用

获取
tHead tFoot 一个表格只有一个 元素
rows 行
cells 单元格

window.onload=function(){
            var oTab=document.getElementById('tab1');

            //alert( oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
            alert( oTab.tBodies[0].rows[1].cells[1].innerHTML);


        }

    <!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>

隔行变色+移入变色

window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oldColor='';

            for (var i=0;i<oTab.tBodies[0].rows.length;i++){
                oTab.tBodies[0].rows[i].onmouseover=function(){
                    oldColor=this.style.background;
                    this.style.background='yellow';
            }

            oTab.tBodies[0].rows[i].onmouseout=function(){
                    this.style.background=oldColor;
            }


                if(i%2){
                    oTab.tBodies[0].rows[i].style.background='';
                }
                else{
                    oTab.tBodies[0].rows[i].style.background='gray';
                }
            }
}
<!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>

添加删除

window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            var oName=document.getElementById('name');
            var oAge=document.getElementById('age');
            var id=oTab.tBodies[0].rows.length+1;


            //添加
            oBtn.onclick=function(){
                var oTr=document.createElement('tr');
                var oTd=document.createElement('td');
                //oTd.innerHTML=oTab.tBodies[0].rows.length+1;  当中间的某个数被删除后在添加顺序会出错
                //修改
                oTd.innerHTML=id++;
                oTr.appendChild(oTd);


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


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

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

                oTd.getElementsByTagName('a')[0].onclick=function(){
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }

                oTab.tBodies[0].appendChild(oTr);
            };

        }
姓名：<input id="name" type="text">
    年龄：<input id="age" type="text">
    <input id="btn1" type="button" value="添加">
    <!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
                <td></td>
            </tr>
        </tbody>
    </table>

搜索

        //搜素
        window.onload=function(){
            var oTab=document.getElementById('tab1');
            var oTxt=document.getElementById('name');
            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
                for(var i=0;i<oTab.tBodies[0].rows.length;i++){

                    var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sTxt=oTxt.value.toLowerCase();
                    var arr=sTxt.split(' '); //用空格隔开关键字 
                    //oTab.tBodies[0].rows[i].style.background='';  //无论如何背景颜色为空
                    oTab.tBodies[0].rows[i].style.display='none';
                    // toLowerCase() 忽略大小写
                    //if(sTab.toLowerCase()==sTxt.toLowerCase()){
                    //search  找到并且返回字符串出现的位置， 若是没找到返回-1

                    //模糊搜素
                    // if(sTab.search(sTxt)!=-1){
                    //     oTab.tBodies[0].rows[i].style.background='yellow';
                    // }
                    // else{
                    //     oTab.tBodies[0].rows[i].style.background='';
                    // }

                     //多关键字搜素
                    //  for(var j=0;j<arr.length;j++){
                    //     if(sTab.search(arr[j])!=-1){
                    //     oTab.tBodies[0].rows[i].style.background='yellow';
                    // }
                    // }


                    
                    for(var j=0;j<arr.length;j++){
                        if(sTab.search(arr[j])!=-1){
                            oTab.tBodies[0].rows[i].style.display='block';
                        }
                    }
                }
            }
        }
 姓名：<input id="name" type="text">
    <input id="btn1"  type="button" value="搜索">

    <!-- 年龄：<input id="age" type="text">
    <input id="btn1" type="button" value="添加"> -->

    <!-- 表格 -->
    <table id="tab1" border="1" width="500px">
        <!-- 表头 -->
        <thead>
            <td>ID</td>
            <td>年龄</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <!-- 表格 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Red</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Green</td>
                <td>21</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yellow</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>张</td>
                <td>26</td>
                <td></td>
            </tr>
        </tbody>
    </table>

排序

<script>
        window.onload=function(){

            var oTab=document.getElementById('tab1');
            var oBtn=document.getElementById('btn1');
            
            //appendChild() //1.先把元素从父级上删除  2.添加到新的父级
            
            oBtn.onclick=function(){
                //创建一个数组将ID传入
                var arr=[];
                for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                    arr[i] =oTab.tBodies[0].rows[i];
                }
                //对这个数组进行排序
                arr.sort(function(tr1,tr2){
                    var n1=parseInt(tr1.cells[0].innerHTML);
                    var n2=parseInt(tr2.cells[0].innerHTML);

                    return n1-n2;
                });
                //重新添加
                for(var i=0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            }
        }
    </script>
</head>
<body>
        <input id="btn1"  type="button" value="排序">
        <!-- 表格 -->
        <table id="tab1" border="1" width="500px">
            <!-- 表头 -->
            <thead>
                <td>ID</td>
                <td>年龄</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <!-- 表格 -->
            <tbody>
                <tr>
                    <td>3</td>
                    <td>Green</td>
                    <td>21</td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Red</td>
                    <td>20</td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Blue</td>
                    <td>19</td>
                    <td></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Yellow</td>
                    <td>22</td>
                    <td></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>张</td>
                    <td>26</td>
                    <td></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Red</td>
                    <td>20</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
</body>

表单的应用

表单的基础知识

表单：向服务器提交数据 注册登陆
action： 提交到哪

表单事件

onsubmit 提交时发生
onreset 重置时发生

<script>
        window.onload=function(){
        var oForm=document.getElementById('form1');

        oForm.onsubmit=function(){
            alert('aaa');
        }
        oForm.onreset=function(){
            alert('bbb');
        }
    }
    </script>
</head>
<body>
    <form id="form1" action="数码时钟.html">
        用户名：<input type="text" name="user"><br>
        密码：<input type="password" name="pass">
        <input type="submit" >
        <input type="reset" >
    </form>
</body>

表单内容验证

阻止用户输入非法字符 阻止事件
输入时、失去焦点时验证 onkeyup onblur
提交时检查 onsubmit
后台数据检查