表格应用

获取

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

后台数据检查

本节重点

表格----元素获取

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

表格----添加，删除

表格----排序

表单----常用属性

表单----事件

表单---校验

DOM高级的更多相关文章

  1. JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底！

    有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...

  2. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底！

    把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...

  3. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1（源代码）--我要坚持到底！

    W3C DOM2样式规范 现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU CSSStyleSheet对象属性: type :始终是 ...

  4. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  5. JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码（附源码）--我要坚持到底！

    作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...

  6. JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底！

    由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  7. JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底！

    先看一段有异常的语句 var sound = 'Roar!'; function myOrneryBeast() { this.style.color='green';//window没有style属 ...

  8. JavaScript DOM 高级程序设计读书笔记二

    响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...

  9. JavaScript DOM 高级程序设计读书笔记一

    创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...

随机推荐

  1. Envelope Letter

    http://www.thefullwiki.org/More_C%2B%2B_Idioms/Envelope_Letter http://www.smallmemory.com/almanac/Co ...

  2. iOS静态库小结--(yoowei)

    准备知识: 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.根据源代码的公开情况,库可以分为2种类型 a.开源库 公开源代码,能看到具体实现 ,比如SDWebImage.AFNetw ...

  3. java 的 AccessController.doPrivileged使用

    AccessController.doPrivileged意思是这个是特别的,不用做权限检查. 在什么地方会用到呢:加入1.jar中有类可以读取一个文件,现在我们要使用1.jar去做这个事情.但是我们 ...

  4. CString

    CString gray("Gray"); CString cat("Cat"); CString graycat = gray + cat;   与其用 sp ...

  5. [译]git push

    push就是把你本地仓储的commit传到远程仓储中去. 用法 git push <remote> <branch> push指定的分支到<remote>中去.   ...

  6. JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件

    现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...

  7. 2013长沙 G Graph Reconstruction (Havel-Hakimi定理)

    Graph Reconstruction Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge Let there ...

  8. Eclipse常见配置及常用插件

    tomcat为能同时运行多个项目而不崩溃,需要配置一下jvm设置 -Xms1024m -Xmx1024m -XX:PermSize=128m -XX:MaxPermSize=512m

  9. 【C语言入门教程】7.3 结构体指针的定义和引用

    C 语言中指针的操作非常灵活,它也能指向结构体变量对结构体变量进行操作.在学习结构指针之前,需要再次加深对指针的认识.声明指针变量时所使用的数据类型修饰符实际上的作用是定义指针访问内存的范围,如果指针 ...

  10. 校友聊NABCD

    特点之一     界面简洁 N:软件的界面是软件成功的必要条件,界面简洁,用户使用方便,就会吸引用户. A:界面可用多种做法做,暂定用C# B:简洁的界面,用户易于理解各项功能,方便使用. C:没有其 ...