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

iteye_13003

于 2011-09-28 22:27:59 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA 乔乐共享 js 文章标签： js table 乔乐共享 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82160998

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

144 篇文章

订阅专栏

123 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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 = '';
      };
}