<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Cities</title> <link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" /> <script type="text/javascript" src="scripts/addLoadEvent.js"></script> <script type="text/javascript" src="scripts/stripeTables.js"></script> <script type="text/javascript" src="scripts/highlightRows.js"></script> </head> <body> <table> <caption>Itinerary</caption> <thead> <tr> <th>When</th> <th>Where</th> </tr> </thead> <tbody> <tr> <td>June 9th</td> <td>Portland, <abbr title="Oregon">OR</abbr></td> </tr> <tr> <td>June 10th</td> <td>Seattle, <abbr title="Washington">WA</abbr></td> </tr> <tr> <td>June 12th</td> <td>Sacramento, <abbr title="California">CA</abbr></td> </tr> </tbody> </table> </body> </html>
addLoadEvent.js 使得页面载入时候运行JS函数：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
不动HTML代码的情况下，stripeTables.js隔行换色：
function stripeTables() { if (!document.getElementsByTagName) return false; 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++) { 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);
highlightRows.js 鼠标经过有动态感：
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);