表格应用

获取

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. Python 调用 user32.dll

    import ctypes h = ctypes.windll.LoadLibrary("C:\\Windows\\System32\\user32.dll") h.Message ...

  2. Swiper基本上使用

    导入三个文件 jquery-1.11.1.min.js,swiper.min.js,swiper.min.css 攻略教程 http://www.swiper.com.cn/api/function/ ...

  3. 替换所有的cell的右侧箭头

    写个UITableViewCell的分类重写这个方法 - (void)didMoveToSuperview { [super didMoveToSuperview]; // 全局替换右侧箭头 if ( ...

  4. Autofac.Integration.Mvc.Owin分析

    using System; using System.ComponentModel; using System.Diagnostics.CodeAnalysis; using System.Secur ...

  5. centos 7.0安装花生壳

    没有wget 先下载get  命令 yum -y install wget 下载位置/usr/local/src 解压目录 /usr/local/bin/phddns-2.0.6.x86_64 1.下 ...

  6. JavaScript正则表达式方法总结

    str.match(reg) 1.reg没有全局标志g,match将只执行一次匹配.匹配成功返回一个数组,arr = [$0,$1,$2,...,index,str],匹配失败返回null. arr中 ...

  7. Android中Java与JavaScript之间交互（转）

    Android代码: package com.fyfeng.testjavascript; import android.app.Activity; import android.content.In ...

  8. java 获取文件的最后编辑时间

    还是日志的问题,需要把日志文件的一些信息给显示出来,其中就需要显示最后的编辑时间,在网上找的答案... File f = new File(path); SimpleDateFormat sdf = ...

  9. Linux下查看文件和文件夹大小

     当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.    du可以查看文件及文件夹的大小. ...

  10. VS2010webConfig配置

    1.连接SqlServer数据库 <connectionStrings> <add name="ConnectionStringName" connectionS ...