javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法

更新時(shí)間：2015年05月14日 16:12:48 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實(shí)現(xiàn)表格切換的技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))</title>
<script type="text/javascript">
var Datas1 = {
  "李莫": "畢業(yè)于清華大學(xué)",
  "周平": "畢業(yè)于北京大學(xué)",
  "羅達(dá)": "畢業(yè)于哈爾濱大學(xué)",
  "鄭朵": "畢業(yè)于河南大學(xué)",
  "王天": "畢業(yè)于湖南大學(xué)"
};
var Datas2 = {
  "腳本之家": "http://www.dhdzp.com",
  "搜狐網(wǎng)": "http://www.souhu.com",
  "CSDN程序員開(kāi)發(fā)網(wǎng)站": "http://www.csdn.net",
  "百度": "http://www.baidu.com",
  "網(wǎng)易": "http://www.163.com"
};
function ToggleData() {
  var btn = document.getElementById("btnToggle");
  if (btn.value == "數(shù)據(jù)1") {
    loadData(Datas1, "數(shù)據(jù)2");
  }
  else {
    loadData(Datas2, "數(shù)據(jù)1");
  }
}
function loadData(Datas,btnValue) {
  var tblMain = document.getElementById("tblMain");
  //清空table數(shù)據(jù)
  var trs = tblMain.getElementsByTagName("tr");
  var trsLen = trs.length;
  //必須先把trs的長(zhǎng)度存放到一個(gè)變量中
  for (var i = 0; i < trsLen; i++) {
    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) { //設(shè)置間隔色
      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");
  //清空數(shù)據(jù)
  var trs = tblMain.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {      
    if (this == trs[i]) {
      trs[i].style.background = "green";
    }
  }
}
function trMouseOut() {
  var tblMain = document.getElementById("tblMain");
  var trs = tblMain.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
    if (i % 2 ==0) {
      trs[i].style.background = "yellow";
    }
    else {
      trs[i].style.background = "white";
    }
  }      
}
function iniEvent() {
  loadData(Datas1, "數(shù)據(jù)2");
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain">
<tbody></tbody>
</table>
<input type ="button" id="btnToggle" value="數(shù)據(jù)2"
onclick="ToggleData()" />
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: