App下載

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

猿友 2021-01-12 16:48:23 瀏覽數(shù) (3064)
反饋

DOM中table的便捷操作

tBobies(數(shù)組) 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時(shí)，條件為假
                    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 重復(fù)
            oBtn.onclick = function () {  
                var oTr = document.createElement('tr') //創(chuàng)建 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 () {  // 給刪除按鈕設(shè)置點(diǎn)擊時(shí)間
                    oTable.tBodies[0].removeChild(this.parentNode.parentNode)
                }
                oTable.tBodies[0].appendChild(oTr)
           }
        }
    </script>
</body>

表格搜索、忽略大小寫、模糊查詢

DOM中table的便捷操作

tBobies(數(shù)組) 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時(shí)，條件為假
                    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 重復(fù)
            oBtn.onclick = function () {  
                var oTr = document.createElement('tr') //創(chuàng)建 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 () {  // 給刪除按鈕設(shè)置點(diǎn)擊時(shí)間
                    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++){ //循環(huán)每一行
        var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var oInp = oName.value.toLowerCase()
//if(oTd == oInp){ //比較每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //將值先轉(zhuǎn)成小寫，再進(jìn)行比較, 或者全部轉(zhuǎn)成大寫 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++){ //循環(huán)每一行
        var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
                    var oInp = oName.value.toLowerCase()
//if(oTd == oInp){ //比較每一行的第二列和文本行的值是否相等//if(oInp.toLowerCase() == oTd.toLowerCase()){ //將值先轉(zhuǎn)成小寫，再進(jìn)行比較, 或者全部轉(zhuǎn)成大寫 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 人點(diǎn)贊