javascript实现table表格隔行变色的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table间隔色</title>
<script type="text/javascript">
function SetTableColor() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 var j = i + 1;
 if (j % 2 == 0) { //偶数行
   trs[i].style.background = "yellow";
 }
 else {
   trs[i].style.background = "blue";
 }
  }
}
</script>
</head>
<body onload="SetTableColor()">
<table id="tblMain" border="1">
<tr>
  <td>1</td>
  <td>三星</td>
  <td>AA</td>
</tr>
<tr>
  <td>2</td>
  <td>Norkia</td>
  <td>BB</td>
</tr>
<tr>
  <td>3</td>
  <td>苹果</td>
  <td>CC</td>
</tr>
<tr>
  <td>4</td>
  <td>联想</td>
  <td>DD</td>
</tr>
<tr>
  <td>5</td>
  <td>小米</td>
  <td>EE</td>
</tr>
<tr>
  <td>6</td>
  <td>HTC</td>
  <td>FF</td>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
You might like
动态生成gif格式的图像要注意?
2006/10/09 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
python机器学习库常用汇总
2017/11/15 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
自主招生自荐书
2013/11/29 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
全陪导游欢迎词
2014/01/17 职场文书
新兵入伍心得体会
2014/09/04 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL