js表格光棒效果3种解决方案，支持动态生成表格

最新推荐文章于 2018-04-27 22:59:15 发布

原创最新推荐文章于 2018-04-27 22:59:15 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #table #乔乐共享 #ViewUI

JAVA 乔乐共享同时被 2 个专栏收录

144 篇文章

订阅专栏

123 篇文章

订阅专栏

本文介绍JavaScript中使用事件绑定实现元素状态变化的三种方法，包括直接绑定、设置初始样式绑定及直接样式绑定，详细解释每种方法的工作原理及应用场景。

部署运行你感兴趣的模型镜像


var table = document.getElementById(table_id);
var rows = table.getElementsByTagName("tr");
// 第一种方法
for (i = 1; i < rows.length; i++) {// 0 is start
     var srcBgColor = null;
     rows[i].onmouseover = function() {
	 srcBgColor = this.style.backgroundColor;
	 this.style.backgroundColor = 'red';
       };
     rows[i].onmouseout = function() {
	 this.style.backgroundColor = srcBgColor;
      };
}

// 第二种方法
for (i = 1; i < rows.length; i++) {// 0 is start
     var srcBgColor = rows[i].style.backgroundColor;
     rows[i].onmouseover = function() {
	 this.style.backgroundColor = 'red';
       };
     rows[i].onmouseout = function() {
	 this.style.backgroundColor = srcBgColor;
      };
}

// 第三种方法
for (i = 1; i < rows.length; i++) {// 0 is start
     rows[i].onmouseover = function() {
	 this.style.backgroundColor = 'red';
       };
     rows[i].onmouseout = function() {
	 this.style.backgroundColor = '';
      };
}