DOM高级

表格应用

获取

tBodies， tHead， tFoot， rows， cells

隔行变色

鼠标移入高亮，

添加，删除一行

DOM的方法使用

<!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=utf-8" />
<title>输出表格</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById(‘tab1‘);

//第一种写法    //alert(oTab.getElementsByTagName(‘tbody‘)[0].getElementsByTagName(‘tr‘)[2].getElementsByTagName(‘td‘)[1].innerHTML);
    alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);
};
</script>
</head>

<body>
<table id="tab1" border="1" width="400">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>流氓</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>莫莫</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>小李</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>小米</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>小明</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

简单表格输出

<!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=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oTab=document.getElementById(‘tab1‘);
    //用变量改变顺序还是倒序
    var bAsc=true;
    oBtn.onclick=function()
    {
        //点击生成数组
        var arr=[];
        var i=0;

        for(i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            //把每行赋给一个数组，坐标从0开始
            arr[i]=oTab.tBodies[0].rows[i];
            }
            //用sort排序arr
    arr.sort(function(tr1, tr2){
           if(bAsc)
           {
               return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
               }
           else
           {
                return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
               }

        });
        //以此打印出每行
    for(i=0;i<arr.length;i++)
        {
            oTab.tBodies[0].appendChild(arr[i]);
        }

        bAsc=!bAsc;
        };
        }

</script>

<body>

<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>6</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>

表格坐标的排序

<!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=utf-8" />
<title>表格搜索</title>
<script>
window.onload=function()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oTab=document.getElementById(‘tab1‘);
    var oTxt=document.getElementById(‘txt1‘);

oBtn.onclick=function()
{
    var i=0;

    for(i=0; i<oTab.tBodies[0].rows.length; i++)
    {
           //获取每行转成大写
           var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
           //获取每个txt转换成大写
          var sValueInTxt=oTxt.value.toLowerCase();
          //把文本框的数组用空格分隔
        var arr=sValueInTxt.split(‘ ‘);

            var bFound=false;

            for(var j=0;j<arr.length;j++)
            {
                //监控text里的value字符串，不为空则开bFound
                if(sValueInTab.search(arr[j])!=-1)
                {
                    bFound=true;
                    break;
                }
            }

            if(bFound)
                {
                    oTab.tBodies[0].rows[i].style.background=‘yellow‘;            }
                else{
                    oTab.tBodies[0].rows[i].style.background=‘‘;
                    }

        }
}
    }

</script>
</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" />

<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>3</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>

表格的搜索

<!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=utf-8" />
<title>表格的删除</title>
<script>
window.onload=function()
{
    var oTab=document.getElementById(‘tab1‘);
    var oBtn=document.getElementById(‘btn1‘);
    var oTxt=document.getElementById(‘txt1‘);
    var iNowId=oTab.tBodies[0].rows.length+1;
    oBtn.onclick=function()
    {
        //创建行标签
        var oTr=document.createElement(‘tr‘);
        var oTd=null;
        //创建第一个空白格
        oTd=document.createElement(‘td‘);
        //内容等于坐标+1
        oTd.innerHTML=iNowId++;
        //添加到行里
        oTr.appendChild(oTd);

        //创建第2个空白格
        oTd=document.createElement(‘td‘);
        //添加输入框内容
        oTd.innerHTML=oTxt.value;
        //添加到行里
        oTr.appendChild(oTd);

        //创建第3个空白格
        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);
        }
    }
</script>  

</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>3</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>

表格的创建加删除

表格应用（2）

搜索

版本1：基础版本------字符串比较

版本2：忽略大小写----大小写转换

版本3：模糊搜索---search的使用

版本4：多关键词---split

高亮显示，筛选

排序

移动li

元素排序：转换---排序----插入

<script>
window.onload=function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oUl=document.getElementById(‘ul1‘);

    oBtn.onclick=function ()
    {
        var aLi=oUl.getElementsByTagName(‘li‘);
        var arr=[];
        var i=0;

        //1.转成数组
        for(i=0;i<aLi.length;i++)
        {
            arr[i]=aLi[i];
        }

        //2.数组排序
        arr.sort(function (li1, li2){
            return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
        });

        //3.重新插入
        for(i=0;i<arr.length;i++)
        {
            oUl.appendChild(arr[i]);
        }
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="排序Li" />
<ul id="ul1">
    <li>32</li>
    <li>12</li>
    <li>87</li>
    <li>9</li>
    <li>18</li>
</ul>
</body>
</html>

li的排序

表单应用（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=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oForm=document.getElementById(‘form1‘);
    var oUser=document.getElementsByName(‘user‘)[0];
    var oPass=document.getElementsByName(‘pass‘)[0];

    oForm.onsubmit=function ()
    {
        if(oUser.value==‘‘ || oPass.value==‘‘)
        {
            alert(‘您填错了‘);
            return false;
        }
    };

    oForm.onreset=function ()
    {
        /*if(confirm(‘是否要清空？‘))
        {
            return true;
        }
        else
        {
            return false;
        }*/

        return confirm(‘是否要清空？‘);
    };
};
</script>
</head>

<body>
<form id="form1" action="http://www.miaov.com/" method="get">
    用户名：<input type="text" name="user" />
    密码：<input type="password" name="pass" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>
</body>
</html>

简单表单提交

向服务器提交数据，比如用户注册

action 提交到哪里

表单事件

onsubmit 提交时发生

onreset 重置时发生

表单应用（2）

表单内容验证

阻止用户输入非法字符阻止事件

输入时，失去焦点时验证 onkeyup onblur

提交时检查 onsubmit

后台数据检查

本节重点

表格----元素获取

表格-----隔行变色，高亮显示

表格----添加，删除

表格----排序

表单----常用属性

表单----事件

表单---校验

时间： 2024-07-29 12:26:50

DOM高级的相关文章

DOM高级编程

前言:W3C规定的三类DOM标准接口(换图)Core DOM(核心DOM),适用于各种结构化文档:XML DOM(Java OOP学过),专用于XML文档:HTML DOM,专用于HTML文档,下面了解下面几个问题. 一.location和history对象back() //返回forward() go() //前进location href //链接reload //加载二.location和history对象的应用 <a href="javascript:location

第七节 DOM操作应用-高级

表格应用: 获取:tBodies.tHead.tFoot.rows.cells 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM高级应用-表格的便捷操作</title> 6 <script> 7 window.onload=function(){ 8 var oTab

关于DOM脚本编程中不唐突性的简单理解

参考自:<JavaScript DOM 高级程序设计>第一章遵循最佳实践 DOM脚本是为文档增强行为和交互性,当然文档需要符合W3C标准(有待进一步的学习).DOM脚本编程依赖于JavaScript,在这里就需要考虑不唐突性(unobtrusiveness)要强调的是,脚本必须是不唐突的,要消除一些不必要的行为和令人讨厌的功能.要保证在没有JavaScript的情况下,页面标记是持续有效的,这些当然会牺牲一些美观效果,是页面看起来不再那么优雅. 有关不唐突性的两个关键词“渐进增强(progr

javascript新手入门必读书籍推荐

在当下,极多的程序员是通过自学来完成入门以及提升的.对于JavaScript的学习来说,同样不例外.许多新手入门javascript选择通过视频教程或者论坛交流的方式进行学习,这种方式固然较为轻松和便捷,但在知识的获取上有些碎片化,对于新手来说不是很好. 在javascript的入门阶段,通过书籍来学习对于新手来说才是最好的手段.书籍的学习固然比较枯燥,但是也是最权威,最系统化的,对于新手来说能够快速的完成基础知识的奠基,而对于之后进一步的提升也是大有裨益.这里笔者就结合自身经验为各位javas

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

如何循序渐进有效学习 JavaScript？

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:宋学彦链接:http://www.zhihu.com/question/19713563/answer/23068003来源:知乎分享一篇超毛的一篇文章<如何学习javascript>(原文网址已经无法访问,所以就不放链接了,内容在下面) 内容: 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门谈不上经验,都是一些教训这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说

如何学习Javascript ？

先说说学js的条件论条件,咱是文科生,大学专业工商管理,和计算机毛关系都没:有人说英语,读了四年大学,很遗憾,咱还四级没混过:就咱这条件都学得乐呵呵的,您还等啥.当然学习JS也是有门槛的,就是你的html和css至少还比较熟练,您不能连<body>这东东是干啥的都不知道就开始上JS了,学乘除前,学好加减法总是有益无害的. 学习JS的忠告 1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到. 2,别急着加技术交流QQ群,加牛人QQ.如果你找张三丰交流武功. 3,看网上什么

【转】别人家的孩子之《说说我的web前端之路,分享些前端的好书》

链接http://www.cnblogs.com/Darren_code/archive/2011/02/09/JavaScript.html 2011-10-31 22:56 by 聂微东 PS:(11年现在都16年了落后了5年哎...) WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正规教育,大多数人都是靠自己自学成才.本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程,目的是给想了解JavaScript或者是刚接触JavaScript的朋友,

如何学习Javascript

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,"靠,你丫半桶水,凭啥教我们".您先别急着骂,先听我说. 你叫一个大学生去教小学数学,不见得比一个初中生教得好.因为大学生早已经过了那个阶段,都忘记自己怎么走过来的了.而对于初中生,刚好走过那个阶段,对自己怎么走过来的还记忆犹新,或者还有一些自己的总结.比如,很多高手觉得那本犀牛书入门很好,他们觉得太简单了,但以我的经验来看,它不是入门的最好选择. 先说说学js的条件