原生js中用DOM操作table以及表格搜索功能

猿友 2021-01-12 16:48:23 浏览数 (2957)
反馈

DOM中table的便捷操作

tBobies(数组) tHead tFoot rows(行) cells(单元格)
<body>
   <table border="1" id="table1" width="500">
       <thead>
            <tr>
               <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
               <td>23</td>
            </tr>
        </tbody>
   </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1')
            alert(oTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML)
            alert(oTable.tBodies[0].rows[0].cells[1].innerHTML)
        }
    </script>
</body>

隔行变色、高亮

<body>
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
               <td>ID</td>
               <td>姓名</td>
                <td>年龄</td>
           </tr>
       </thead>
       <tbody>
            <tr>
               <td>1</td>
               <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>2</td>
                <td>里斯</td>
                <td>24</td>
            </tr>
            <tr>
               <td>3</td>
                <td>王武</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1');
            var oldColor = '' //原来的背景颜色
            alert(oTable.tBodies[0].rows.length)
            for(var i = 0; i < oTable.tBodies[0].rows.length; i++){
                oTable.tBodies[0].rows[i].onmouseover = function(){
                    oldColor = this.style.background; //将原来的背景颜色保存起来
                    this.style.background = 'yellow'
                }
                oTable.tBodies[0].rows[i].onmouseout = function(){
                    this.style.background = oldColor
                }
                if(i % 2){ // i%2为0时，条件为假
                    oTable.tBodies[0].rows[i].style.background = "#999"
                }else{
                    oTable.tBodies[0].rows[i].style.background = ""
                }
            }
        }
    </script>
</body>

添加行、删除行

<body>
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="button" id="btn" value="添加">
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1'); //获取table
            var oName = document.getElementById('name') //获取姓名文本框
            var oAge = document.getElementById('age') //获取年龄文本框
            var oBtn = document.getElementById('btn') //获取添加按钮
            var id = oTable.tBodies[0].rows.length + 1; //将 id 的值作为全局变量保存，避免 id 重复
            oBtn.onclick = function () {  
                var oTr = document.createElement('tr') //创建 tr 元素
               oTr.innerHTML = '<td>' + (id++) + '</td><td>' + oName.value + //给 tr 赋值
                   '</td><td>' +
                    oAge.value + '</td><td><a href="javascript:;">删除</a></td>'
                oTr.getElementsByTagName('a')[0].onclick = function () {  // 给删除按钮设置点击时间
                    oTable.tBodies[0].removeChild(this.parentNode.parentNode)
                }
                oTable.tBodies[0].appendChild(oTr)
           }
        }
    </script>
</body>

表格搜索、忽略大小写、模糊查询

DOM中table的便捷操作

tBobies(数组) tHead tFoot rows(行) cells(单元格)
<body>
   <table border="1" id="table1" width="500">
       <thead>
            <tr>
               <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
               <td>23</td>
            </tr>
        </tbody>
   </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1')
            alert(oTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML)
            alert(oTable.tBodies[0].rows[0].cells[1].innerHTML)
        }
    </script>
</body>

隔行变色、高亮

<body>
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
               <td>ID</td>
               <td>姓名</td>
                <td>年龄</td>
           </tr>
       </thead>
       <tbody>
            <tr>
               <td>1</td>
               <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>2</td>
                <td>里斯</td>
                <td>24</td>
            </tr>
            <tr>
               <td>3</td>
                <td>王武</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1');
            var oldColor = '' //原来的背景颜色
            alert(oTable.tBodies[0].rows.length)
            for(var i = 0; i < oTable.tBodies[0].rows.length; i++){
                oTable.tBodies[0].rows[i].onmouseover = function(){
                    oldColor = this.style.background; //将原来的背景颜色保存起来
                    this.style.background = 'yellow'
                }
                oTable.tBodies[0].rows[i].onmouseout = function(){
                    this.style.background = oldColor
                }
                if(i % 2){ // i%2为0时，条件为假
                    oTable.tBodies[0].rows[i].style.background = "#999"
                }else{
                    oTable.tBodies[0].rows[i].style.background = ""
                }
            }
        }
    </script>
</body>

添加行、删除行

<body>
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="button" id="btn" value="添加">
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1'); //获取table
            var oName = document.getElementById('name') //获取姓名文本框
            var oAge = document.getElementById('age') //获取年龄文本框
            var oBtn = document.getElementById('btn') //获取添加按钮
            var id = oTable.tBodies[0].rows.length + 1; //将 id 的值作为全局变量保存，避免 id 重复
            oBtn.onclick = function () {  
                var oTr = document.createElement('tr') //创建 tr 元素
               oTr.innerHTML = '<td>' + (id++) + '</td><td>' + oName.value + //给 tr 赋值
                   '</td><td>' +
                    oAge.value + '</td><td><a href="javascript:;">删除</a></td>'
                oTr.getElementsByTagName('a')[0].onclick = function () {  // 给删除按钮设置点击时间
                    oTable.tBodies[0].removeChild(this.parentNode.parentNode)
                }
                oTable.tBodies[0].appendChild(oTr)
           }
        }
    </script>
</body>

表格搜索、忽略大小写、模糊查询

<body>
    姓名：<input type="text" id="name"><input type="button" value="搜索" id="btn"> 
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>2</td>
                <td>里斯</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1');
            var oName = document.getElementById('name')
            var oBtn = document.getElementById('btn')
            oBtn.onclick = function()
            {
        for(var i = 0; i < oTable.tBodies[0].rows.length; i++){ //循环每一行
        var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var oInp = oName.value.toLowerCase()
//if(oTd == oInp){ //比较每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //将值先转成小写，再进行比较, 或者全部转成大写 toUpperCase()if(oTd.search(oInp) != -1){ //字符串中的search()，如果包含返回字符的位置、不包含返回 -1
          oTable.tBodies[0].rows[i].style.background = 'red'
            }else{
              oTable.tBodies[0].rows[i].style.background = ''
                    }
                }
            }
        }
    </script>
</body>
<body>
    姓名：<input type="text" id="name"><input type="button" value="搜索" id="btn"> 
    <table border="1" id="table1" width="500">
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>2</td>
                <td>里斯</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            var oTable = document.getElementById('table1');
            var oName = document.getElementById('name')
            var oBtn = document.getElementById('btn')
            oBtn.onclick = function()
            {
        for(var i = 0; i < oTable.tBodies[0].rows.length; i++){ //循环每一行
        var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var oInp = oName.value.toLowerCase()
//if(oTd == oInp){ //比较每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //将值先转成小写，再进行比较, 或者全部转成大写 toUpperCase()if(oTd.search(oInp) != -1){ //字符串中的search()，如果包含返回字符的位置、不包含返回 -1
          oTable.tBodies[0].rows[i].style.background = 'red'
            }else{
              oTable.tBodies[0].rows[i].style.background = ''
                    }
                }
            }
        }
    </script>
</body>


JavaScript

0 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com