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 相关文章推荐
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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
PHP正则验证Email的方法
2015/06/15 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php 实现进制相互转换
2016/04/07 PHP
php中错误处理操作实例分析
2019/08/23 PHP
onpropertypchange
2006/07/01 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python 初始化多维数组代码
2008/09/06 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python中生成Epoch的方法
2017/04/26 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
飞利浦美国官网:Philips美国
2020/02/28 全球购物
爱情保证书范文
2014/02/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
天鹅湖观后感
2015/06/09 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python