表格应用

获取

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. CPU host-passthrough技术与应用

    为了保证虚拟机在不同宿主机之间迁移的时候的兼容性,Libvirt对CPU提炼出标准的几种类型,在/usr/share/libvirt/cpu_map.xml中可以查到.cpu_map.xml不仅是CP ...

  2. MIME类型（JSP中）

    什么是MIME类型-在把输出结果传送到浏览器上的时候,浏览器必须启动是党的应用程序来处理这个输出文档.这可以通过多种类型MIME(多功能网际邮件扩充协议)来完成.在HTTP中,MIME类型被定义在Co ...

  3. jQuery 参考手册 - 遍历

    jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹 ...

  4. linux 生成KEY的方法与使用

    转自:http://blog.163.com/tqq_0716/blog/static/7690741220110611350344/ 服务器A: 192.168.1.1 服务器B: 192.168. ...

  5. 解决python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xXX' in position XX

    从网上抓了一些字节流,想打印出来结果发生了一下错误: UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position ...

  6. winServer2003除默认端口外的其他端口只能本地访问，关闭防火墙即可

    winServer2003除默认端口外的其他端口只能本地访问,关闭防火墙即可

  7. VPN和SSH的原理区别

    原文:http://www.hostloc.com/thread-153223-1-1.html 看了http://www.hostloc.com/thread-153166-1-1.html 主要说 ...

  8. Mac 上真正替换LiveWriter 的工具 - ecto

    Mac 上真正替换LiveWriter 的工具 - ecto 13年开始使用mac.而后想把 windows 替换到.一直在寻找LiveWriter 的工具,至今终于找到 我先感谢这位博主 http: ...

  9. js文字滚动

      <style type="text/css">  #gongao{width:1000px;height:30px;overflow:hidden;line-hei ...

  10. php数据结构与算法

    php面试题之二--数据结构和算法(高级部分) 二.数据结构和算法 1.使对象可以像数组一样进行foreach循环,要求属性必须是私有.(Iterator模式的PHP5实现,写一类实现Iterator ...