day36—javascript對錶格table的操作應用

標籤：order   轉行   else   var   擷取   img   實現   內容   今天   

轉行學開發，代碼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;   //還原到之前的顏色               }          }

 

day36—javascript對錶格table的操作應用