表格应用

获取

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. canvas入门（画圆）

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  2. winform的扩展的带有截图功能picturebox

    using System; using System.ComponentModel; using System.Diagnostics; using System.Drawing; using Sys ...

  3. iOS9 适配

    iOS适配的相关内容的整理 之前iOS开发者一直很庆幸自己不用像安卓开发者那样适配各种不同类型的机型,但如今随着iPhone各种机型的改变,适配也成了我们开发中必须会的内容了.首先我们来了解一下对于不 ...

  4. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  5. hdu4920 Matrix multiplication 模3矩阵乘法

    hdu4920 Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 ...

  6. [译]git revert

    git revert git revert用来撤销一个已经提交了的快照. 但不是从项目历史中移除这个commit, 而是生成一个新的commit, 老的commit还是保留在历史项目里面的. 这样做的 ...

  7. Express开发实例(1) —— Hello,world!

    Express是NodeJs开发中最常用的基础模块.NodeJs本身有Http模块,但是易用性并不好,因此有人在此基础上开发了Express模块. 什么是express express提供了丰富的路由 ...

  8. solr多条件查询（一）

    每个项目的数据结构可能不同,查询的格式有可能不同,本项目所有的字段为动态的,所以整理了一下, 1.查询所有字段中包含”测试“但是所有的TM不包含”江苏大学“ q:X_1457955996315KEY: ...

  9. KVM虚拟机内存不足，调整参数

    Dec :: vgfs001 kernel: tiotest_AMD_x86 invoked oom-killer: gfp_mask=, oom_adj=, oom_score_adj= Dec : ...

  10. #define 中#和##的作用

    #的作用是把后面的参数变成一个字符串. 如,#define f(a) #a f(hello world)相当于"hello world": ##的作用是把两个字符串连接起来. 如, ...