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 17 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue-iview动态新增和删除的方法
Jun 17 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
浅谈python写入大量文件的问题
2018/11/09 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
ORACLE第二个十问
2013/12/14 面试题
党日活动总结
2014/05/07 职场文书
专项法律服务方案
2014/06/11 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python