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

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>
排序二
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,054评论 1赞 10
  • JS章节③ (上) DOM应用
    1.DOM基础 什么是DOM :document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫...
    壹点微尘阅读 424评论 0赞 0
  • 05-DOM相关知识点讲解
    DOM DOM内容主要分为四部分： 什么是DOM和节点； 获取节点； 节点操作（3种）； 属性操作（3种）。 什么...
    magic_pill阅读 761评论 0赞 1
  • iApp_《ijs》速成开发手册3.0
    《ijs》速成开发手册3.0 官方用户交流：iApp开发交流（1） 239547050iApp开发交流（2） 10...
    叶染柒丶阅读 5,068评论 0赞 7
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,717评论 2赞 17