表格高亮
这个是我在蓝色里看到的，果果写的表格高亮，效果本身没什么，只是觉得他的写法很牛屮，所以记录一下，可能在以后的效果中借签一下他的思路。
JS:
function Fx(el, over, hot) {
var els = document.getElementById(el).getElementsByTagName("tr"), el2, el3,
del = function(el, css) {
el.className = el.className.replace(eval('/\\b' + css + '\\b/ig'), '');
//注意这里的return
return el;
},
add = function(el, css) {
if (el.className.indexOf(css) == -1) el.className += ' ' + css;
return el;
};
for (var i = 0; i < els.length; ++i) {
el = els[i];
el.onmouseover = function() {
//这里是亮点，这句里的el2记录上一个onmouseover对象，和下一句的el2已经不是同一个了
if (el2) del(el2, over);
el2 = add(this, over);
};
el.onmouseout = function() {
del(this, over);
};
el.onclick = function() {
//类似前面的onmouseover
if (el3) del(el3, hot);
el3 =add(this, hot);
};
};
};
<!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" />
<title>无标题文档</title>
<style type="text/css">
table { border-collapse:collapse;}
table td { border:1px solid #ddd; padding:5px;}
table tr.over { background:#999;}
table tr.active { background:#333;}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="gg">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script type="text/javascript" src="bggl.js"></script>
<script type="text/javascript">
Fx('gg','over','active');
</script>
</body>
</html>
