javascript表格的一些便捷操作

攻城师

2019-06-28

表格的一些便捷操作

平时我们在dom中操作一些元素都是使用document.getElementById("xx")等类型的方式，table有一些比较快捷的方式。比如tBodies、tHead、tFoot、rows、cells。

代码实现

<!DOCTYPE html>
<html>
<head>
  <title>表格的一些便捷操作——tBodies、tHead、tFoot、rows、cells</title>
  <style>
    table{
      border-top:1px solid #dcdee2;
      border-left: 1px solid #dcdee2;
      border-collapse: collapse;
      border-spacing: 0;
    }
    table td,table th{
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      width: 400px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    table th{
      background: #f8f8f9;
    }
  </style>
  <script>
    window.onload=function(){
      var oTab=document.getElementById("tab1");
      // 表格中的便捷操作，可以不使用document.getElementById等形式
      // 获取tbody的特殊方式，每个表格中可以有多个tbody
      console.log(oTab.tBodies[0]);
      // 获取tbody中的第一行
      console.log(oTab.tBodies[0].rows[0]);
      // 获取tbody中的第一行第一列
      console.log(oTab.tBodies[0].rows[0].cells[0]);
      // 获取thead和tfoot，每个表格中只有一个thead和tfoot
      console.log(oTab.tHead);
      console.log(oTab.tFoot);
    }
  </script>
</head>
<body>
  <table id="tab1">
    <thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

表格各行变色效果和鼠标划过高亮显示效果

代码实现

<!DOCTYPE html>
<html>

<head>
  <title>表格实现各行变色、鼠标划过高亮显示</title>
  <style>
    table{
      border-top:1px solid #dcdee2;
      border-left: 1px solid #dcdee2;
      border-collapse: collapse;
      border-spacing: 0;
    }
    table td,table th{
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      width: 400px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    table th{
      background: #f8f8f9;
    }
  </style>
  <script>
    window.onload=function(){
      var oTab=document.getElementById("tab1");
      var oldColor="";
      for(var i=0; i<oTab.tBodies[0].rows.length; i++){
        oTab.tBodies[0].rows[i].onmouseover=function(){
          oldColor=this.style.background;//进来的时候先把原先的颜色存储一下再改变颜色
          this.style.background="#ebf7ff";
        }
        oTab.tBodies[0].rows[i].onmouseout=function(){
          this.style.background=oldColor;
        }
        if(i%2){
          oTab.tBodies[0].rows[i].style.background="#f8f8f9";
        }else{
          oTab.tBodies[0].rows[i].style.background="";
        }
      }
    }
  </script>
</head>
<body>
  <table id="tab1">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>20</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>26</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">总计3条</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

html表格 border table