一、表格应用 - 1
  • 获取
  • tBodies、tHead、tFoot、rows、cells
一个表格可以有很多tbody，所以tBodies是数组；
一个表格只能有一个thead和tfoot，所以tHead和tFoot是一个元素；
表格有自己独有的简便操作；因为js诞生的时候，那会全是表格；所以给表格提供了一些便捷的操作。
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

    alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);

};

</script>

</head>

<body>

<table id="tab1" border="1" width="500">

    <thead>

        <td>ID</td>

        <td>姓名</td>

        <td>年龄</td>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Blue</td>

            <td>27</td>

        </tr>

        <tr>

            <td>2</td>

            <td>张三</td>

            <td>23</td>

        </tr>

        <tr>

            <td>3</td>

            <td>李四</td>

            <td>28</td>

        </tr>

        <tr>

            <td>4</td>

            <td>王五</td>

            <td>25</td>

        </tr>

        <tr>

            <td>5</td>

            <td>张伟</td>

            <td>24</td>

        </tr>

    </tbody>

</table>

</body>

</html>
  • search方法的使用：
<script>

var str='abcdef';

alert(str.search('g'));    //找到并且返回字符串出现的位置，如果没找到-1

</script>

2.appendChild的作用：

1.先把元素从原有父级上删掉

2.添加到新的父级
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#ul1 {background:green;}

#ul2 {background:yellow;}

</style>

<script>

window.onload=function ()

{

    var oUl1=document.getElementById('ul1');

    var oUl2=document.getElementById('ul2');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        var oLi=oUl1.children[0];

        //oUl1.removeChild(oLi);

        oUl2.appendChild(oLi);    //1.先把元素从原有父级上删掉    2.添加到新的父级

    };

};

</script>

</head>

<body>

<ul id="ul1">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

<input id="btn1" type="button" value="移动" />

<ul id="ul2">

</ul>

</body>

</html>

3.表格排序。这里例子是按照ID排序，排序的思路用到了上面的appendChild：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        var arr=[];

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            arr[i]=oTab.tBodies[0].rows[i];

        }

        arr.sort(function (tr1, tr2){

            var n1=parseInt(tr1.cells[0].innerHTML);

            var n2=parseInt(tr2.cells[0].innerHTML);

            return n1-n2;

        });

        for(var i=0;i<arr.length;i++)

        {

            oTab.tBodies[0].appendChild(arr[i]);

        }

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="排序" />

<table id="tab1" border="1" width="500">

    <thead>

        <td>ID</td>

        <td>姓名</td>

        <td>年龄</td>

        <td>操作</td>

    </thead>

    <tbody>

        <tr>

            <td>2</td>

            <td>张三</td>

            <td>23</td>

            <td></td>

        </tr>

        <tr>

            <td>6</td>

            <td>王四</td>

            <td>24</td>

            <td></td>

        </tr>

        <tr>

            <td>1</td>

            <td>Blue</td>

            <td>27</td>

            <td></td>

        </tr>

        <tr>

            <td>5</td>

            <td>张伟</td>

            <td>24</td>

            <td></td>

        </tr>

        <tr>

            <td>3</td>

            <td>李四</td>

            <td>28</td>

            <td></td>

        </tr>

        <tr>

            <td>4</td>

            <td>王五</td>

            <td>25</td>

            <td></td>

        </tr>

    </tbody>

</table>

</body>

</html>
 
 二、表单：
表单事件
onsubmit  提交时发生
onreset    重置时发生
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oForm=document.getElementById('form1');

    oForm.onsubmit=function ()

    {

        alert('aaa');

        return false;    //阻止默认事件

    };

    oForm.onreset=function ()

    {

        alert('bbbbbb');

    };

};

</script>

</head>

<body>

<form id="form1" action="http://www.zhinengshe.com/">

    用户名：<input type="text" name="user" /><br>

    密码：<input type="password" name="pass" />

    <input type="submit" />

    <input type="reset" />

</form>

</body>

</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
--------------

学习blus老师js(5)--DOM操作应用高级的更多相关文章

  1. 学习blus老师js(4)--DOM

    一.DOM节点 1.获取子节点: childNodes  nodeType         节点类型 children            只包括元素,不包括文本:  子节点只算第一层.只算孩子一级 ...

  2. 学习blus老师js(1)--基础

    1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...

  3. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  4. 学习blus老师js(3)--定时器的使用

    1.无缝滚动——基础 物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动   offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...

  5. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...

  6. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  7. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  8. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  9. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

随机推荐

  1. Redis之字符串

    Redis 字符串 String 是redis最基本的类型,value 不仅可以是 String,也可以是数字. 使用 Strings 类型,可以完全实现目前 Memcached 的功能,并且效率更高 ...

  2. Template Method（模板方法）

    意图: 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.TemplateMethod 使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 适用性: 一次性实现一个算法的不变的部分, ...

  3. [转][osg]osg渲染引擎框架图，流程图（根据《最长一帧》整理）

    转自:http://m.blog.csdn.net/article/details?id=49679731 本文参考<<osg最长一帧>>, <<OpenScene ...

  4. python学习笔记（HTMLTestRunner在Py3的兼容）

    博主最近开始重构自动化框架并且向Py3上兼容 第一个问题就是生成测试报告的HTMLTestRunner,由于此模块是基于Py2开发的,这里需要修改源码 # 94行 # import StringIO ...

  5. 获取文本中所有的<img>标签的位置，获取所有img标签的src

    public static int[] GetImagePos(string str) { str = str.Replace("$", " "); str = ...

  6. Android------个人项目（歆语气象通）

    歆语气象通: 歆语气象伴随你的身边,便捷生活. 包含了以下功能: 1. 天气预报数据覆盖中国城市和地区:2. 提供一周天气预报及最低最高温度,时刻关注天气,轻松计划出行:3. 各种指数详细信息,如太阳 ...

  7. 297. Serialize and Deserialize Binary Tree *HARD*

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  8. 前端工程构建工具——Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...

  9. Fragment在Activity中跳转,实现类似新闻标题跳转新闻内容功能

    1.准备的工作,新闻数据类,新闻数据适配器,适配器的布局: News.java package com.example.zps.fourfragmentbestpractice; /** * Crea ...

  10. Faces人脸识别项目简介

    Faces人脸识别 分为两个模块,Faces文件夹下存放人脸识别算法的代码,Web文件夹下存放网站搭建的代码 详情请查看各个模块下的readme文档 项目简介 核心算法 一款基于Dlib.opencv ...