用css实现表格隔行颜色不一样的效果

2007-12-23无人留言

这里用到了javascript，简单的实现表格隔行颜色的不同，方法还有很多，不过用javascript能够很好的跨浏览器兼容，具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <style> tr.light { background-color: #33FFCC; } tr.dark{ background-color: #3366FF; } </style> <script> function initTableCss(){ var tab=document.getElementById( "table"); for(var i=0;i <tab.rows.length;i++){ tab.rows[i].className=(i%2==1)? "light": "dark"; } } window.onload=initTableCss; </script> <table id="table" /> <tr> <td> aaa </td> <td> bbb </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> <tr> <td> aaa </td> <td> bbb </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> <tr> <td> aaa </td> <td> bbb </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> <tr> <td> aaa </td> <td> bbb </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> <table> </BODY> </HTML>

提示：你可以先修改部分代码再运行。

类别：

标签：CSS, Javascript

如本站引用的文字、图片、其它媒体等侵犯了您的权益，请及时告知，我们将会在第一时间删除。

日	一	二	三	四	五	六
« 一
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

落脚点

用css实现表格隔行颜色不一样的效果

相关文章：

发表评论：

Find it!

Calendar

Categories

AdSense