表格高亮

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

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>



你可能感兴趣的:(表格)