表格高亮

这个是我在蓝色里看到的，果果写的表格高亮，效果本身没什么，只是觉得他的写法很牛屮，所以记录一下，可能在以后的效果中借签一下他的思路。

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);
		};
	};
};
HTML:

<!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>

posted @ 2010-11-30 17:52  zjhsd2007  阅读(354)  评论(0)    收藏  举报