DOM Scripting代码：隔行变色
摘要：DOM Scripting一书中的表格代码，每隔一行就改变一次背景颜色，并且当鼠标经过某一行的时候会将该行突出显示
下面是变色表格的部分关键代码和注释：
实例JavaScript代码
addLoadEvent.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
highlightRows.js
//给table的行设置鼠标经过效果
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function() {
this.style.fontWeight = "normal";
}
}
}
addLoadEvent(highlightRows);
stripeTables.js
function stripeTables() {
if (!document.getElementsByTagName) return false;
//取得所有table节点
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
//取得行
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
//每隔一行设置一次class
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
addLoadEvent(stripeTables);
演示：
