首页W3C技术头条原生js中用DOM操作table以及表格搜索功能

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

w3cschool小编 2021-01-12 16:48:23 浏览数 (101)
反馈

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>


0 人点赞

相关课程 更多»

{{ relateCourse.bookname }}

{{ relateCourse.description }}

{{ relateCourse.watch_count }} 人参与

立即学习
相关文章 更多»
{{ relateArticle.title }} {{ relateArticle.postdate }}

最新文章

热门文章

更多»