表格应用

获取

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. webkit的一些不为人知的高级属性

    1.-webkit-tap-highlight-color   tap按钮或者链接时,就会出现一个半透明的灰色背景,设置属性: -webkit-tap-highlight-color:transpar ...

  2. jquery mobile 图片自适应问题

    解决办法: 加入一段css <link rel="stylesheet" href="http://jquerymobile.com/demos/1.1.0/doc ...

  3. Quartz.NET总结（一）入门

    前段时间,花了大量的时间,将原先的计划任务,切换到Quartz.NET来进行管理.原先的后台定时服务都是通过计划任务来实现的,但是随着业务增长,计划任务也越来越多,每个后台服务,都得创建一个计划任务. ...

  4. Camera

    Unity摄像机Viewport使用   http://blog.sina.com.cn/s/blog_64ab3f630100y7e7.html http://blog.sina.com.cn/s/ ...

  5. DESCryptoServiceProvider

    public static byte[] DESEncrypt(byte[] data, byte[] sKey) { return DESEncrypt(data, sKey, sKey); } / ...

  6. gradle 默认属性

    Properties(未翻译) Property Description allprojects 包含该项目及其子项目的属性 ant The AntBuilder for this project. ...

  7. va_list深究

    va_list深究 2011-04-21 21:06:11|  分类: C/C++|字号 订阅     VA函数(variable argument function),参数个数可变函数,又称可变参数 ...

  8. PPTP（Point to Point Tunneling Protocol），即点对点隧道协议。

    PPTP PPTP(Point to Point Tunneling Protocol),即点对点隧道协议.该协议是在PPP协议的基础上开发的一种新的增强型安全协议,支持多协议虚拟专用网(VPN),可 ...

  9. 再说vundle:　完全vim字符编程的四个必须插件 - zen coding 和emmet插件的使用

    一个常识: 基本上vim插件的配置文集都是放在对应插件目录 的/autoload/ plugin_name.vim 文件中的 有四个必要/必须的插件,实现vim完全的字符界面的编程: NERDTree ...

  10. windows下vmware10.0 安装centos7

    centos7.0-1506, 1511, 是指2015年, 06月份, 11月份. 这是rhel ubuntu发布新版本的时间. centos7.0 只提供了64位的系统下载: x86_64: we ...