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

1月 2009
一	二	三	四	五	六	日
« 十一月
	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

星期日, 12月 23rd, 2007 @ 3:10 下午 | CSS, Javascript

这里用到了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>

Tags: CSS, 表格, Javascript

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

落脚点

Calendar

Random

AD

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

Related posts

Leave a Reply