在哪里摔倒
就在哪里自己爬起来
这个例子用的地方很多，以前自己也用，一般都是给className直接赋值，修改className样式，用在鼠标扫过，或者是显示多级菜单的时候
例子是很简单的，我记录是因为这里有一个“追加样式”，现在才知道原来样式的定义还可以class="style1 style2"这样子设置的，这种设置方法，是两种样式的叠加，记得看过一个可拖动单元格的表格的js，里面就有给className设置成“+" 当前样式"”的，一直很奇怪，在来是在追加样式
还有就是，这里的stripeTables方法里的信号灯很好玩，以前我们用asp，用c#搞隔行变色的时候，都喜欢用一个int型变量记录当前的行号，然后呢，来一个模2，查看是不是双数，把行分成单行和双行来搞
在这个方法里，他用了一个bool型的信号灯，灯在每次循环开始时，就先置false，然后呢，每走一行，就开一次灯或者关一次灯，这样子，只要看灯是关的还是开的，就可以知道是单行还是双行了，用不着那么笨蛋的去rowIndex++;再来取模了，好笨蛋啊，以前真的好笨蛋
记录文件：
addLoadEvent.js
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addClass.js
function addClass(element, value)
{
if(!element.className)
{
//元素原来没有设置样式的，直接赋值
element.className = value;
}
else
{
//有原来的样式，追加样式
value = element.className + " " + value;
element.className = value;
}
}
displayAbbreviations.js见user1/9/archives/2007/4485.html
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);
stripeTables.js
function stripeTables()
{
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd, rows;
for(var i = 0; i < tables.length; i++)
{
odd = false;
rows = tables[i].getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++)
{
if(odd == true)
{
addClass(rows[j], "odd");
//rows[j].style.backgroundColor = "#ffc000";
odd = false;
}
else
{
odd = true;
}
}
}
}
addLoadEvent(stripeTables);
itinerary.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="format.css" type="text/css" media="screen" />
<title>Cities</title>
<script type="text/javascript" src="/addLoadEvent.js"></script>
<script type="text/javascript" src="/addClass.js"></script>
<script type="text/javascript" src="/stripeTables.js"></script>
<script type="text/javascript" src="/displayAbbreviations.js"></script>
<script type="text/javascript" src="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, <acronym title="Oregon">OR</acronym></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <acronym title="Washington">WA</acronym></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacremento, <acronym title="California">CA</acronym></td>
</tr>
</tbody>
</table>
</body>
</html>
