js table鼠标悬浮当前行高亮和切换数据效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标悬浮当前行高亮效果。

并且具有隔行变色功能,同时点击按钮能够切换表格数据。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
var one = {
  "前端专区": "div css教程",
  "后台专区": "asp.net教程",
  "资源专区": "特效下载",
  "正则表达式教程": "表达式实例代码",
  "网站优化专区": "SEO教程"
};
var two = {
  "犀牛前端部落": "http://www.pipipi.net",
  "特效部落": "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.pipipi.net",

  "特效部落": "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一章节。

js table鼠标悬浮当前行高亮和切换数据效果

回复

我来回复
  • 暂无回复内容