js基础

来源：互联网发布：linux gzip 打包压缩编辑：程序博客网时间：2024/06/02 05:37
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div>            <input type="text" value="输入需要查找的人名" id="studentName" />            <input type="button" value="基础 - 查找" id="search1" />        </div>        <div>            <input type="text" id="studentName2" />            <input type="button" value="忽略大小 - 查找" id="search2" onclick="demo02()" />        </div>        <div>            <input type="text" id="studentName3" />            <input type="button" value="模糊查询 - 查找" id="search3" onclick="demo03()" />        </div>        <div>            <input type="text" id="studentName4" />            <input type="button" value="多关键字 - 查找" id="search4" onclick="demo04()" />        </div>        <div>            <input type="text" id="studentName5" />            <input type="button" value="筛选 - 查找" id="search5" onclick="demo05()" />        </div>        <table border="1" width="500">            <thead align="center" <tr>                <td>学号</td>                <td>姓名</td>                <td>语文</td>                <td>数学</td>                <td>总分</td>                <td>操作</td>                </tr>            </thead>            <tbody align="center">                <tr>                    <td>1</td>                    <td>小明</td>                    <td>100</td>                    <td>100</td>                    <td>200</td>                    <td></td>                </tr>                <tr>                    <td>2</td>                    <td>张三</td>                    <td>90</td>                    <td>60</td>                    <td>150</td>                    <td></td>                </tr>                <tr>                    <td>3</td>                    <td>李四</td>                    <td>59</td>                    <td>80</td>                    <td>139</td>                    <td></td>                </tr>                <tr>                    <td>4</td>                    <td>王五</td>                    <td>80</td>                    <td>85</td>                    <td>165</td>                    <td></td>                </tr>                <tr>                    <td>5</td>                    <td>赵六</td>                    <td>56</td>                    <td>40</td>                    <td>96</td>                    <td></td>                </tr>                <tr>                    <td>6</td>                    <td>Victor</td>                    <td>78</td>                    <td>88</td>                    <td>166</td>                    <td></td>                </tr>                <tr>                    <td>7</td>                    <td>Alexander</td>                    <td>90</td>                    <td>96</td>                    <td>186</td>                    <td></td>                </tr>                <tr>                    <td>8</td>                    <td>Amanda</td>                    <td>96</td>                    <td>99</td>                    <td>195</td>                    <td></td>                </tr>            </tbody>        </table>    </body>    <script>        function demo01() {            var oStudentNameTag = document.getElementById('studentName');            var sHint = '输入需要查找的人名'; // 文本框的提示文案            // 添加focus事件，当点击文本框如果是提示内容把提示内容删除            oStudentNameTag.onfocus = function() {                // 如果是提示文本，把文本删除                if (this.value == sHint) {                    this.value = '';                }            };            // 添加blur事件，如果用户没有输入内容，复恢提示文本            oStudentNameTag.onblur = function() {                if (this.value.trim() == '') {                    this.value = sHint;                }            };            // 0. 绑定按钮的点击事件            document.getElementById('search1').onclick = function() {                // 1. 得到用户输入的名字                var sSearchText = oStudentNameTag.value;                // 2. 获取到tbody                var oTbodyies = document.getElementsByTagName('table')[0].tBodies[0];                // 3. 迭代tbody的rows                // 补充：如果是要做颜色相间，需要在这里调用一次设置背景色的函数                changeBackgroundColor();                for (var i = 0; i < oTbodyies.rows.length; i++) {                    // 4. 迭代过程检查姓名的内容是否与输入的内容一致                    if (oTbodyies.rows[i].cells[1].innerHTML == sSearchText) {                        // 5. 如果是一致将当前行的背景色进行修改                        oTbodyies.rows[i].style.backgroundColor = 'lightyellow';                    }/*else{                        oTbodyies.rows[i].style.backgroundColor = '';                    }*/                }            };        }        /**         *  忽略大小的查找实现          */        function demo02(){            // 1. 得到用户输入的信息            var sSearchText = document.getElementById('studentName2').value;            // 2. 得到tbody            var oTbody = document.getElementsByTagName('table')[0].tBodies[0];            // 3. 恢复原有的背景色            changeBackgroundColor();            // 4. 迭代tbody下的rows(tr)            for (var i=0;i<oTbody.rows.length;i++){                // 5. 迭代过程中检查td的内容是否与输入的内容一致                //if (oTbody.rows[i].cells[1] == sSearchText){} // 区分大小写的                // 统一把用户输入的和已有数据都转换为小写(大写)                // 查找的文本应该是在获取时做转换，如果是在循环中转换每迭代一次都要做一次转换，效率不高.                if (oTbody.rows[i].cells[1].innerHTML.toLowerCase() == sSearchText.toLowerCase()){                    // 6. 是，修改行rows的背景色                    oTbody.rows[i].style.backgroundColor = '#CDB79E';                }            }        }        /**         *  模糊查找实现          */        function demo03(){            // 1. 得到用户输入的信息            var sSearchText = document.getElementById('studentName3').value;            // 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码            if (sSearchText.length < 1){                return;     //return之后，就不会再执行后面的代码            }            // 2. 得到tbody            var oTbody = document.getElementsByTagName('table')[0].tBodies[0];            // 3. 恢复原有的背景色            changeBackgroundColor();            // 4. 迭代tbody下的rows(tr)            for (var i=0;i<oTbody.rows.length;i++){                // 5. 迭代过程中检查td的内容是否与输入的内容相近                // string.seach(文本)     查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法                if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(                    sSearchText.toLowerCase()) != -1){                    // 6. 是，修改行rows的背景色                    oTbody.rows[i].style.backgroundColor = '#CDB79E';                }            }        }        /**         *  多关键字，模糊查找实现          */        function demo04(){            // 1. 得到用户输入的信息            var sSearchText = document.getElementById('studentName4').value;            // 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码            if (sSearchText.length < 1){                return;     //return之后，就不会再执行后面的代码            }            // 1.2 对输入的数据进行分隔，分隔符我们需要提前规约好            var aSearchTextes = sSearchText.split(' '); // 需要查找的文本内容            // 2. 得到tbody            var oTbody = document.getElementsByTagName('table')[0].tBodies[0];            // 3. 恢复原有的背景色            changeBackgroundColor();            // 4. 迭代tbody下的rows(tr)            for (var i=0;i<oTbody.rows.length;i++){                // 4.1 迭代查找条件的数组                for (var j=0;j<aSearchTextes.length;j++){                    // 5. 迭代过程中检查td的内容是否与输入的内容相近                    // string.seach(文本)     查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法                    if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(                        aSearchTextes[j].toLowerCase()) != -1){                        // 6. 是，修改行rows的背景色                        oTbody.rows[i].style.backgroundColor = '#CDB79E';                    }                }            }        }        /**         *  筛选 - 查找         */        function demo05(){            // 1. 得到用户输入的信息            var sSearchText = document.getElementById('studentName5').value;            // 1.1 判断输入内容长度是否小于1，如果是不执行下面的代码            if (sSearchText.length < 1){                return;     //return之后，就不会再执行后面的代码            }            // 1.2 对输入的数据进行分隔，分隔符我们需要提前规约好            var aSearchTextes = sSearchText.split(' '); // 需要查找的文本内容            // 2. 得到tbody            var oTbody = document.getElementsByTagName('table')[0].tBodies[0];            // 3. 迭代tbody下的rows(tr)            for (var i=0;i<oTbody.rows.length;i++){                // 3.0 先把行隐藏起来，通过后面的查找步骤，确认该行是否能显示                oTbody.rows[i].style.display = 'none';                // 3.1 迭代查找条件的数组                for (var j=0;j<aSearchTextes.length;j++){                    // 4. 迭代过程中检查td的内容是否与输入的内容相近                    // string.seach(文本)     查找文本出现的位置，如果返回-1表示查找不到内容。也可以使用indexOf，lastIndexOf这两个方法                    if(oTbody.rows[i].cells[1].innerHTML.toLowerCase().search(                        aSearchTextes[j].toLowerCase()) != -1){                        // 5. 是，修改行rows的显示的样式，设置为block                        if (window.ActiveXObject){ // 判断是否为IE                            oTbody.rows[i].style.display = 'block';                        }else{                            oTbody.rows[i].style.display = 'table-row';                        }                    }                }            }        }        changeBackgroundColor();        // 设置表格的背景色相间        demo01();        function changeBackgroundColor(){            // 1. 得到table的tbodies            var oTbodies = document.getElementsByTagName('table')[0].tBodies[0];            // 2. 迭代所有的rows            for (var i=0;i<oTbodies.rows.length;i++){                // 3. 设置颜色                oTbodies.rows[i].style.backgroundColor =                     i%2==0 ? '#E0EEE0' : '#EAEAEA';            }        }//↑↓    </script><style>    /*div{display:inline-table}*/</style></html>
0 0