communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Analyse approfondie des applications avancées du DOM de JavaScript

Analyse approfondie des applications avancées du DOM de JavaScript

php中世界最好的语言
Libérer： 2018-03-13 13:35:13
original
1517 Les gens l'ont consulté

Cette fois, je vais vous présenter des applications DOM avancées utilisant JavaScript Quelles sont les précautions pour les applications DOM avancées utilisant JavaScript Voici des cas pratiques. .

Changement des couleurs dans les lignes alternées

<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(&#39;tab1&#39;);            //获取第二行的&#39;张三&#39;//            alert( oTab.getElementsByTagName(&#39;tbody&#39;)[0].getElementsByTagName(&#39;tr&#39;)[1].getElementsByTagName(&#39;td&#39;)[1].innerHTML);
            //table独有的简单操作
            //上面的代码可以简写成下面的格式;//            alert( oTab.tBodies(&#39;tbody&#39;)[0].rows(&#39;tr&#39;)[1].cells(&#39;td&#39;)[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 = &#39;green&#39;;
                }
                aRow[i].onmouseout = function () {                    this.style.backgroundColor = oldColor;
                }                if (i%2){
                    aRow[i].style.background = &#39;&#39;;
                }else {
                    aRow[i].style.background = &#39;#ccc&#39;;
                }
            }
        }    </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>
Copier après la connexion

2 Ajout de tableaux

Ajout dynamique de tableaux

<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(&#39;tab1&#39;);            var oName = document.getElementById(&#39;name&#39;);            var oAge = document.getElementById(&#39;age&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {                var oTr = document.createElement(&#39;tr&#39;);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oTab.tBodies[0].rows.length+1;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                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>
Copier après la connexion

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(&#39;tab1&#39;);            var oName = document.getElementById(&#39;name&#39;);            var oAge = document.getElementById(&#39;age&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);            //行数
            var vRow = oTab.tBodies[0].rows.length+1;
            oBtn.onclick = function () {                var oTr = document.createElement(&#39;tr&#39;);
                vRow++;                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = vRow;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);                var oTd = document.createElement(&#39;td&#39;);
                oTd.innerHTML = &#39;<a href="javaScript:;">删除</a>&#39;;
                oTr.appendChild(oTd);
                oTd.getElementsByTagName(&#39;a&#39;)[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>
Copier après la connexion
4. Recherche dans un tableau

Ignorer la casse, recherche floue, recherche par mots-clés multiples

toLowerCase() convertit la chaîne en minuscules ;
recherche floue lorsqu'elle est trouvée, renvoie à la position ; s'il n'est pas trouvé, retournez -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(&#39;tab1&#39;);            var oTxt = document.getElementById(&#39;name&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);
            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(&#39; &#39;);                    //先把背景颜色重置
                    oTab.tBodies[0].rows[i].style.backgroundColor = &#39;&#39;;                    for (var j=0;j<arr.length;++j){                        if (sTab.search(arr[j]) != -1){
                            oTab.tBodies[0].rows[i].style.backgroundColor = &#39;yellow&#39;;
                        }
                    }
                }
            }
        }    </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>
Copier après la connexion
5. Tri

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>08-排序</title>
    <script>
        window.onload = function () {            var btn = document.getElementById(&#39;btn1&#39;);            var oUl = document.getElementById(&#39;ul1&#39;);
            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>
Copier après la connexion
<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(&#39;tab1&#39;);            var oBtn = document.getElementById(&#39;btn1&#39;);
            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>
Copier après la connexion
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. .Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Application de base approfondie de JavaScript

8 connaissances de base de JS auxquelles il faut prêter attention à

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript js 应用
source：php.cn
Article précédent：Connaissance approfondie de JavaScript Article suivant：Analyse approfondie de JavaScript et du mouvement de JS
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal