美文网首页
JS章节③ (下) DOM的高级应用

JS章节③ (下) DOM的高级应用

作者: 壹点微尘 | 来源:发表于2017-06-15 18:47 被阅读19次

1.表格的应用

  • 隔行变色
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-表格的应用</title>
    <style>
        table{
            margin: 100px auto;
            width: 300px;
            text-align: center;
            background-color: black;
        }

        table tr {
            background-color: white;
        }
    </style>

    <script>
        window.onload = function () {

            var oTab = document.getElementById('tab1');
            //获取第二行的'张三'
//            alert( oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

            //table独有的简单操作
            //上面的代码可以简写成下面的格式;
//            alert( oTab.tBodies('tbody')[0].rows('tr')[1].cells('td')[1].innerHTML);

            /**
             *90年代,div+css没人用,人们用的几乎全是table,于是乎,就有了table的便捷操作.
             * tBodies(一个table里可以有多个tbody),tHead,tFoot,rows,cells等便捷操作
             * */
            //隔行变色

            var aRow = oTab.tBodies[0].rows;
//            alert(aRow.length);
            //记录一下颜色
            var oldColor = null;
            for(var i=0;i<aRow.length;i++){

                aRow[i].onmouseover = function () {
                    //先记录一下之前的颜色
                    oldColor = this.style.backgroundColor;
                    this.style.background = 'green';
                }

                aRow[i].onmouseout = function () {
                    this.style.backgroundColor = oldColor;
                }

                if (i%2){
                    aRow[i].style.background = '';

                }else {
                    aRow[i].style.background = '#ccc';
                }
            }
        }
    </script>
</head>
<body>
<table id="tab1">
    <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>32</td>
    </tr>
    <tr>
        <td>3</td>
        <td>李四</td>
        <td>17</td>
    </tr>
    <tr>
        <td>4</td>
        <td>王五</td>
        <td>28</td>
    </tr>
    <tr>
        <td>5</td>
        <td>张伟</td>
        <td>35</td>
    </tr>
    </tbody>
</table>
</body>
</html>
table的高级用法:隔行变色

2.表格的添加

表格的动态添加

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-表格的添加 删除</title>
    <style>

        #div1{
            text-align: center;
        }

        #div1 #form{
            margin: 100px 0 10px;
        }

        #div1 table{
            margin: 0px auto;
            width: 300px;
            text-align: center;
            background-color: black;
        }

        table tr {
            background-color: white;
        }
    </style>

    <script>
        window.onload = function () {

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

            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function () {

                var oTr = document.createElement('tr');

                var oTd = document.createElement('td');
                oTd.innerHTML = oTab.tBodies[0].rows.length+1;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);

                //注意:一定要添加到第0个tBodies上
                oTab.tBodies[0].appendChild(oTr);
            }

        }

    </script>
</head>
<body>

<div id="div1">

    <div id="form">
        姓名:<input id="name" type="text">
        年龄:<input id="age" type="text">
        <input id="btn1" type="button" value="添加">
    </div>
    <table id="tab1">
        <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>32</td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
        </tr>

        </tbody>

    </table>

</div>
</body>
</html>
表格的添加

3.表格的删除

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-表格的添加 删除</title>
    <style>

        #div1{
            text-align: center;
        }

        #div1 #form{
            margin: 100px 0 10px;
        }

        #div1 table{
            margin: 0px auto;
            width: 300px;
            text-align: center;
            background-color: black;
        }

        table tr {
            background-color: white;
        }
    </style>
    <script>
        window.onload = function () {

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

            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
            var oBtn = document.getElementById('btn1');
            //行数
            var vRow = oTab.tBodies[0].rows.length+1;

            oBtn.onclick = function () {

                var oTr = document.createElement('tr');

                vRow++;
                var oTd = document.createElement('td');
                oTd.innerHTML = vRow;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML = '<a href="javaScript:;">删除</a>';
                oTr.appendChild(oTd);

                oTd.getElementsByTagName('a')[0].onclick = function () {

                    //注意:一定要从第0个tBodies上删除.
                    //this.parentNode 指的是 td
                    //this.parentNode.parentNode 指的是 tr
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                };

                //注意:一定要添加到第0个tBodies上
                oTab.tBodies[0].appendChild(oTr);
            }

        }
    </script>
</head>
<body>
<div id="div1">
    <div id="form">
        姓名:<input id="name" type="text">
        年龄:<input id="age" type="text">
        <input id="btn1" type="button" value="添加">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
表格的删除

4.表格的搜索

忽略大小写 , 模糊搜索 , 多关键字搜索
toLowerCase() 把字符串转成全小写的形式;
模糊搜索 search 当找到的时候,返回位置;找不到,返回-1;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-表格的搜索</title>
    <style>

        #div1{
            text-align: center;
        }

        #div1 #form{
            margin: 100px 0 10px;
        }

        #div1 table{
            margin: 0px auto;
            width: 300px;
            text-align: center;
            background-color: black;
        }

        table tr {
            background-color: white;
        }
    </style>

    <script>
        window.onload = function () {

            var oTab = document.getElementById('tab1');
            var oTxt = document.getElementById('name');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function () {

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

                    //忽略大小写
                    //toLowerCase() 把字符串转成全小写的形式;
                    //把if里面两边都转成全小写的形式;
                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sTxt = oTxt.value.toLowerCase();


                    //模糊搜索 search 当找到的时候,返回位置;找不到,返回-1
                    //search()

                    //多关键字搜索
                    //假设多个关键字之间用 空格 隔开的,以后可以使用正则表达式

                    var arr = sTxt.split(' ');

                    //先把背景颜色重置
                    oTab.tBodies[0].rows[i].style.backgroundColor = '';

                    for (var j=0;j<arr.length;++j){
                        if (sTab.search(arr[j]) != -1){

                            oTab.tBodies[0].rows[i].style.backgroundColor = 'yellow';
                        }
                    }

                }


            }



        }

    </script>
</head>
<body>

<div id="div1">

    <div id="form">
        姓名:<input id="name" type="text">
        <input id="btn1" type="button" value="搜索">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>

        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
            <td></td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>
表格的搜索

5.排序

  • 1
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-排序</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            btn.onclick = function () {
                //先初始化数组
                var arr = [];
                for (var i=0;i<oUl.children.length;i++){
                   arr.push(oUl.children[i]);
                    //排序
                    arr.sort(function (li1,li2) {
                        //最好不要依赖隐式类型转换,提前给强转下
                        var n1 = parseInt(li1.innerHTML);
                        var n2 = parseInt(li2.innerHTML);
                        return n1-n2;
                    })
                }
                //再重新添加
                for(var i=0;i<arr.length;i++){
                    oUl.appendChild(arr[i]);
                }
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="排序">
<ul id="ul1">
    <li>34</li>
    <li>25</li>
    <li>9</li>
    <li>88</li>
    <li>54</li>
</ul>
</body>
</html>
排序一
  • 2
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-表格的排序</title>
    <style>
        #div1{
            text-align: center;
        }
        #div1 #form{
            margin: 100px 0 10px;
        }
        #div1 table{
            margin: 0px auto;
            width: 300px;
            text-align: center;
            background-color: black;
        }
        table tr {
            background-color: white;
        }
    </style>
    <script>
        window.onload = function () {
            var oTab = document.getElementById('tab1');
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function () {
                //aTr是个集合,他没有sort()这个方法
                var aTr = oTab.tBodies[0].rows;

                //把tr放到一个数组里面
                var arr = [];
                for(var i=0;i<aTr.length;i++){
                    arr.push(aTr[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>
<div id="div1">
    <div id="form">
        <input id="btn1" type="button" value="排序">
    </div>
    <table id="tab1">
        <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
        </thead>

        <tbody>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>32</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>28</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>张伟</td>
            <td>35</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>17</td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
排序二

相关文章

  • JS章节③ (下) DOM的高级应用

    1.表格的应用 隔行变色 2.表格的添加 表格的动态添加 3.表格的删除 4.表格的搜索 忽略大小写 , 模糊搜索...

  • JS章节③ (上) DOM应用

    1.DOM基础 什么是DOM :document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫...

  • 1 - 获取元素的选择器API

    英语单词 advanced 高级 js组成 DOM BOM ECMAScript DOM: 操作HTML, CSS...

  • DOM

    以下内容总结自《js高级程序设计 第三版》 今天来说说JS中的DOM以及DOM操作。 DOM是什么，做了什么？ D...

  • Vue 源码-diff算法

    虚拟 DOM 概念虚拟 DOM是对 DOM 的 js 抽象表示,能够描述 DOM 结构和关系,应用的各种状态变化作...

  • DOM的节点类型

    本篇是基于《JavaScript高级程序设计（第3版）》DOM相关章节做的整理与归纳，概述了DOM的常见节点类型及...

  • BFC和DOM初级认知总结

    DOM 最近看了JavaScript DOM编程艺术这本书的DOM章节，下面就总结下DOM这个章节关于DOM的知识...

  • 《高性能JavaScript》读书笔记——DOM操作

    用JS进行DOM操作的代价是昂贵的，它是富web应用中最常见的性能瓶颈。 DOM 文档对象模型（DOM）是一个独立...

  • JS 章节② 基础应用(下) : 定时器

    1. Date 获取 年 月 日 星期 时 分 秒 2.定时器 setInterval 间隔型 : 间隔...

  • 前端知识体系

    1.JS基础 5 2.JS高级 5JS高级程序设计，各种api的应用，es6新增api的运用 3.CSS...

网友评论

      本文标题：JS章节③ (下) DOM的高级应用

      本文链接：https://www.haomeiwen.com/subject/mwfuqxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JS章节③ (下) DOM的高级应用|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！