day36—javascript对表格table的操作应用

Posted 2020-10-31 东易韦

转行学开发，代码100天——2018-04-21

 

今天记录一下，javascript对表格table的操作应用，包括表格元素的获取，创建，删除等。

一个普通的完整表格包括以下几个部分：table->thead->tbody->tr->td等

 

1.表格的创建

 

如下面的一个表格，表头部分：序号-姓名-年龄

其下有三行三列的内容，属于tbody部分

其html结构如下：

<table id="tab" border="3" width="600px" height="40px" >
        <thead>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>tom</td>
                <td>23</td>
            </tr>
            <tr>
                <td>2</td>
                <td>john</td>
                <td>33</td>
            </tr>
            <tr>
                <td>3</td>
                <td>july</td>
                <td>21</td>
            </tr>
            
        </tbody>
    </table>

 

2.表格元素的获取

比如要想获取上述表格中的年龄为21的单元格内容，用什么方法呢？

最普通的实现思路就是逐步获取table->tbody->tr->td

如下：

getElementsByTagName

    window.onload = function(){
          
          var oTab = document.getElementById("tab");
          alert(oTab.getElementsByTagName(\'tbody\')[0].getElementsByTagName(\'tr\')[2].getElementsByTagName(\'td\')[2].innerHTML);
        };

而实际上表格本身包括行row和列column方法

 alert(oTab.tBodies[0].rows[2].cells[2].innerHTML);

即获取tBody可以用tBodies

获取行用rows

获取单元格用cells

 

3.隔行变色

 

 //隔行变色
          for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
               if (i%2) {
                   oTab.tBodies[0].rows[i].style.background ="";
               }else
               {
                   oTab.tBodies[0].rows[i].style.background="#666";
               }
          }

 

4.鼠标移入移出表格换色

 //鼠标移入移出变色操作
               oTab.tBodies[0].rows[i].onmouseover = function(){
                  this.style.background="#999"; 
               };
               oTab.tBodies[0].rows[i].onmouseout = function(){
                   this.style.background="";
               }

此时如果鼠标滑过表格中某行时，该行颜色变色。

如此其基本功能完成了，但是结合上一步，如果同时要求各行换色，鼠标移动操作变色效果会如何呢？

 //隔行变色
          for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
               if (i%2) {
                   oTab.tBodies[0].rows[i].style.background ="";
               }else
               {
                   oTab.tBodies[0].rows[i].style.background="#666";
               }

               //鼠标移入移出变色操作
               oTab.tBodies[0].rows[i].onmouseover = function(){
                  this.style.background="#999"; 
               };
               oTab.tBodies[0].rows[i].onmouseout = function(){
                   this.style.background="";
               }
          }

鼠标移至第一行，其效果：

但是鼠标移开后， 其颜色均为白色，即代码中设置的空

如此便不是我们预期的效果了。。。

这一问题的处理，其实也很简单，即设置一个变量保存鼠标移动行的颜色，鼠标移开时还原即可。

   //隔行变色
          for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
              var oOldColor = null;            //新建一个保存当前行颜色的变量

               if (i%2) {
                   oTab.tBodies[0].rows[i].style.background ="";
               }else
               {
                   oTab.tBodies[0].rows[i].style.background="#666";
               }

               //鼠标移入移出变色操作
               oTab.tBodies[0].rows[i].onmouseover = function(){
                   oOldColor = this.style.background;   //保存变色之前的颜色
                  this.style.background="#999"; 
               };
               oTab.tBodies[0].rows[i].onmouseout = function(){
                   this.style.background=oOldColor;   //还原到之前的颜色
               }
          }