Js 实现表格隔行换色一例

更新时间：2009年11月10日 21:51:28 作者：

Js实现表格隔行换色一例，这种效果网上已经有很多啦，每一种都有特色，请大家选择使用。

<!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>Js实现表格隔行换色一例</title> <style type="text/css"> body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:#f7f7f7;} </style> </head> <body> <div class="bf"> <table border="1" bordercolor="#00CCFF" cellspacing="0" > <caption>脚本之家欢迎你</caption> <tr class="b"> <th></th> <th scope="col">2006年</th> <th scope="col">2007年</th> <th scope="col">2008年</th> <th scope="col">2009年</th> </tr> <tr class="b"><th scope="row" rowspan="4">总</th></tr> <tr> <td>4</td> <td>2</td> <td>56</td> <td>43</td> </tr> <tr> <td>10</td> <td>4</td> <td>10</td> <td>10</td> </tr> <tr> <td>10</td> <td>76</td> <td>10</td> <td>9</td> </tr> <tr class="b"><th scope="row" rowspan="4">总</th></tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <td>2</td> <td>10</td> <td>12</td> <td>10</td> </tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr class="b"><th scope="row" rowspan="4">总</th></tr> <tr> <td>10</td> <td>5</td> <td>10</td> <td>10</td> </tr> <tr> <td>10</td> <td>7</td> <td>10</td> <td>3</td> </tr> <tr> <td>10</td> <td>5</td> <td>7</td> <td>8</td> </tr> </table> </div> <script type="text/javascript"> var bg=document.getElementsByTagName('tr'); for(var i=0,j=0;i<bg.length;i++) { if(bg[i].className!='b') { j++; bg[i].className=j%2==0?'f1':'f2'; } else {bg[i].className='f3'} } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

一篇文章深入了解JavaScript中的fetch方法
这篇文章主要给大家介绍了关于JavaScript中fetch方法的相关资料,JavaScript中的fetch()方法用于向服务器请求并加载网页中的信息,请求可以是返回JSON或XML格式数据的任何API,需要的朋友可以参考下
2023-10-10
小程序自定义弹框效果
这篇文章主要为大家详细介绍了小程序自定义弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
微信小程序加载更多点击查看更多
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
Echarts地图实例详解(地图样式、合并地图、增加地图)
ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了关于Echarts地图的相关资料,包括地图样式、合并地图、增加地图,需要的朋友可以参考下
2022-06-06
javascript中Array()数组函数详解
在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下
2015-08-08
layer关闭当前窗口页面以及确认取消按钮的方法
今天小编就为大家分享一篇layer关闭当前窗口页面以及确认取消按钮的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Promise.race和Promise.any使用示例详解
这篇文章主要为大家介绍了如何使用Promise.race() 和 Promise.any() 示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
正则中的回溯定义与用法分析【JS与java实现】
这篇文章主要介绍了正则中的回溯定义与用法,结合实例形式分析了回溯的概念、功能并提供了JS与java实现方法,需要的朋友可以参考下
2016-12-12
JS与Ajax Get和Post在使用上的区别实例详解
这篇文章主要介绍了JS与Ajax Get和Post在使用上的区别实例详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
table insertRow、deleteRow定义和用法总结
这篇文章主要对table insertRow、deleteRow定义和用法做下总结,需要的朋友可以参考下
2014-05-05