Of Stack

javascript implements the Table interval color and the method of selecting highlighted of and dynamically switching data

  • 2020-06-12 08:30:29
  • OfStack

This article gives an example of how javascript implements Table interval colors and selects highlighting (and dynamically switching data). Share to everybody for everybody reference. Specific implementation methods are as follows: 


<!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 Spacing color and select highlight ( And dynamically switching data )</title>
<script type="text/javascript">
var Datas1 = {
  " Li mo ": " I graduated from Tsinghua University ",
  " His drought-striken fields ": " I graduated from Beijing University ",
  " Rhoda ": " I graduated from Harbin University ",
  " Zheng flower ": " I graduated from Henan University ",
  " King day ": " I graduated from Hunan University "
};
var Datas2 = {
  " The home of the script ": "https://www.ofstack.com",
  " Sohu net ": "http://www.souhu.com",
  "CSDN Programmer development website ": "http://www.csdn.net",
  " baidu ": "http://www.baidu.com",
  " netease ": "http://www.163.com"
};
function ToggleData() {
  var btn = document.getElementById("btnToggle");
  if (btn.value == " data 1") {
    loadData(Datas1, " data 2");
  }
  else {
    loadData(Datas2, " data 1");
  }
}
function loadData(Datas,btnValue) {
  var tblMain = document.getElementById("tblMain");
  // empty table data 
  var trs = tblMain.getElementsByTagName("tr");
  var trsLen = trs.length;
  // Must first put trs Store to the length of 1 A variable 
  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) { // Set the interval color 
      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");
  // Empty data 
  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, " data 2");
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain">
<tbody></tbody>
</table>
<input type ="button" id="btnToggle" value=" data 2"
onclick="ToggleData()" />
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.

Related articles: