一、表格应用 - 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. openwrt编译系统生成ubi镜像的各变量解析

    1.MKUBIFS_OPTS的作用 传递参数给mkfs.ubifs 2.MKUBIFS_OPTS传递了哪些参数? 传递了最小输入输出单元大小.逻辑擦除块大小.最大物理擦除块的个数,分别由选项-m.-e ...

  2. OpenDayLight Helium实验一 OpenDaylight的C/S模式实验

    本文基于:OpenDaylight的C/S模式实验而成 C/S 结构,即大家熟知的客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Ser ...

  3. Scikit-learn 库的使用

    1. 与文本处理相关的库 1. 对语料库提取特征词集合 from sklearn.feature_extraction.text import TfidfVectorizer, CountVector ...

  4. org.springframework.beans.factory.BeanCreationException: sqlSessionFactory

    sqlSessionFactory实例化错误 pom默认导入的jar包中存在低版本,导致实例化sqlSessionFactory错误,删除此jar包即可

  5. Intel IDEA 2018破解（亲测成功）

    破解网址:https://jingyan.baidu.com/article/cb5d6105d9b1b1005d2fe074.html

  6. opencv错误（Unhandled expection at at 0x0007EEE...）

    错误截图如下: 情况1:加载人脸检测分类器的时候出错,不能写相对路径一定要写绝对路径 例如:cascade.load("D:\\recognise-your-own-face2\\recog ...

  7. 牛客网——E进阶吧阶乘

    链接:https://www.nowcoder.net/acm/contest/75/E来源:牛客网 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 32768K,其他语言65536K ...

  8. 本人遇到的spring事务之UnexpectedRollbackException异常解决笔记

    本人最近在使用spring事务管理的过程中遇到如下异常,导致服务端抛出500给前端,让搞前端的哥们抱怨我心里着实不爽,前前后后折腾了近半个小时才得于解决,今天就做个笔记,以免日后又犯这个错误.好了,错 ...

  9. MIPS 汇编指令学习

    MIPS 寄存器 MIPS comes with 32 general purpose registers named $0. . . $31Registers also have symbolic ...

  10. Double H3.0

    Double H3.0 团队分工 组员 王熙航 杨艺勇 刘杰 郑沐榕 李冠锐 曾磊鑫 戴俊涵 聂寒冰 任务内容 分配任务,整理内容,审核修改 规格说明书汇总排版 ,记录其他组的提问 用例图,功能描述 ...