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需再刷新一下页面才能执行]

您可能感兴趣的文章:

js操作二级联动实现代码
网上二级（多级）联动的例子也不少，有各种不同的操作方法。我所采用的方法网上也应该有的，不过我还没有看到过。
2010-07-07
Javascript 异步加载详解(浏览器在javascript的加载方式)
本文总结一下浏览器在 javascript 的加载方式,需要的朋友可以参考下
2012-05-05
仅在IE6/7/8下cssText返回值少了分号的测试代码
在IE6/7/8中少了分号。使用cssText属性时需注意。
2011-03-03
拖动时防止选中
本文主要介绍了拖动时防止选中的小知识点。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
使用JavaScrip模拟实现仿京东搜索框功能
使用js模拟实现京东的搜索框，主要用了js中的onfocus(注册焦点事件)，onblur(失去焦点的事件)；本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-10-10
JavaScript正则表达式实例详解
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
2016-10-10
JavaScript高级程序设计阅读笔记（十六） javascript检测浏览器和操作系统-detect.js
javascript检测浏览器和操作系统 detect.js使用介绍，需要的朋友可以参考下
2012-08-08
javascript实现复制与粘贴操作实例
这篇文章主要介绍了javascript实现复制与粘贴操作,以实例形式讲述了javascript实现复制与粘贴操作的实现方法,需要的朋友可以参考下
2014-10-10
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
这篇文章主要介绍了判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
layui 解决富文本框form表单提交为空的问题
今天小编就为大家分享一篇layui 解决富文本框form表单提交为空的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10

Js 实现表格隔行换色一例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具