js table滑鼠懸浮當前行高亮和切換資料效果

admin發表於2017-04-08
JS

本章節分享一段程式碼例項，它實現了滑鼠懸浮當前行高亮效果。

並且具有隔行變色功能，同時點選按鈕能夠切換表格資料。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var one = {
  "前端專區": "div css教程",
  "後臺專區": "asp.net教程",
  "資源專區": "特效下載",
  "正規表示式教程": "表示式例項程式碼",
  "網站優化專區": "SEO教程"
};
var two = {
  "螞蟻部落": "http://www.softwhy.com",
  "特效部落": "http://www.51texiao.cn",
  "CSDN程式設計師開發網站": "http://www.csdn.net",
  "百度": "http://www.baidu.com",
  "網易": "http://www.163.com"
};
function ToggleData() {
  var btn = document.getElementById("btnToggle");
  if (btn.value == "資料一") {
    loadData(one, "資料二");
  }
  else {
    loadData(two, "資料一");
  }
}
function loadData(Datas,btnValue) {
  var tblMain = document.getElementById("tblMain");
  //清空table資料
  var trs = tblMain.getElementsByTagName("tr");
  var trsLen = trs.length;
  //必須先把trs的長度存放到一個變數中
  for (var index = 0; index < trsLen; index++) {
    tblMain.deleteRow(0);
  }
  var nIndex = 0;
  for (var key in Datas) {
    var tr = tblMain.insertRow(-1);
    tr.onmouseover = trMouseOver;
    tr.onmouseout = trMouseOut;
    var td1 = tr.insertCell(-1);
    td1.innerHTML = key;
    var td2 = tr.insertCell(-1);
    td2.innerHTML = Datas[key];
    if (nIndex % 2 == 0) { //設定間隔色
      tr.style.background = "yellow";
    }
    else {
      tr.style.background = "white";
    }
    nIndex++;
  }
  var btn = document.getElementById("btnToggle");
  btn.value = btnValue;
}
function trMouseOver() {
  var tblMain = document.getElementById("tblMain");
  //清空資料
  var trs = tblMain.getElementsByTagName("tr");
  for (var index = 0; index < trs.length; index++) {      
    if (this == trs[index]) {
      trs[index].style.background = "green";
    }
  }
}
 
function trMouseOut() {
  var tblMain = document.getElementById("tblMain");
  var trs = tblMain.getElementsByTagName("tr");
  for (var index = 0; index < trs.length; index++) {
    if (index % 2 ==0) {
      trs[index].style.background = "yellow";
    }
    else {
      trs[index].style.background = "white";
    }
  }   
    
}
function iniEvent() {
  loadData(one, "資料二");
}
window.onload=function(){
  iniEvent();
  var obt=document.getElementById("btnToggle");
  obt.onclick=function(){ToggleData()}
}
</script>
</head>
<body>
<table id="tblMain">
<tbody></tbody>
</table>
<input type ="button" id="btnToggle" value="資料2"/>
</body>
</html>

上面你的程式碼實現實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var one = {  "前端專區": "div css教程",

  "後臺專區": "asp.net教程",

  "資源專區": "特效下載",

  "正規表示式教程": "表示式例項程式碼",

  "網站優化專區": "SEO教程"

};

var two = {

  "螞蟻部落": "http://www.softwhy.com",

  "特效部落": "http://www.51texiao.cn",

  "CSDN程式設計師開發網站": "http://www.csdn.net",

  "百度": "http://www.baidu.com",

  "網易": "http://www.163.com"

}，這是兩個json結構資料，用來作為table表格的資料。

（2）.function ToggleData() {}，此函式實現了table表格資料的切換。

（3）.var btn = document.getElementById("btnToggle")，獲取按鈕元素物件。

（4）.if (btn.value == "資料一") {

  loadData(one, "資料二");

}，如果按鈕顯示"資料一"，那麼點選按鈕就會切換到資料一。

（5）.function loadData(Datas,btnValue) {}，現了表格資料載入效果，第一個引數是json格式物件，第二個引數是按鈕value值。

（6）.var tblMain = document.getElementById("tblMain")，獲取表格物件。

（7）.var trs = tblMain.getElementsByTagName("tr")，獲取tr元素集合。

（8）.var trsLen = trs.length，獲取行的個數。

（9）.for (var index = 0; index < trsLen; index++) {

  tblMain.deleteRow(0);

}，刪除表格中的所有行。

（10）.var nIndex = 0，宣告一個變數並賦初值為0，後面會有使用。

（11）.for (var key in Datas) {}，使用for in語句遍歷json格式資料（物件直接量）。

（12）.var tr = tblMain.insertRow(-1)，在表格中插入一行。

（13）.tr.onmouseover = trMouseOver，為行註冊onmouseover事件處理函式。

（14）.tr.onmouseout = trMouseOut，為行註冊onmouseout 事件處理函式。

（15）.var td1 = tr.insertCell(-1)，為當前行插入一個單元格。

（16）.td1.innerHTML = key，設定當前單元格的內容為物件直接量屬性。

（17）.var td2 = tr.insertCell(-1)，為tr再新增一個td單元格。

（18）.td2.innerHTML = Datas[key]，設定當前td單元格的內容為物件直接兩屬性值。

（19）.if (nIndex % 2 == 0) { //設定間隔色

  tr.style.background = "yellow";

}

else {

  tr.style.background = "white";

},實現tr行隔行變色效果。

（20）.nIndex++，加1。

（21）.var btn = document.getElementById("btnToggle")，獲取按鈕元素。

（22）.btn.value = btnValue，設定按鈕的value屬性值。

（23）.function trMouseOver() {

  var tblMain = document.getElementById("tblMain");

  //清空資料

  var trs = tblMain.getElementsByTagName("tr");

  for (var index = 0; index < trs.length; index++) {      

    if (this == trs[index]) {

      trs[index].style.background = "green";

    }

  }

}，onmouseover事件處理函式。

為當前滑鼠懸浮的tr行設定背景色為綠色。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.deleteRow()可以參閱js deleteRow()一章節。

（3）.for in 語句可以參閱javascript for in一章節。

相關文章