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 09 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 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 EOT定界符的使用详解
2008/09/30 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
python执行get提交的方法
2015/04/29 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Scrapy的简单使用教程
2017/10/24 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python Requests库基本用法示例
2018/08/20 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python游戏开发的五个案例分享
2020/03/09 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
介绍一下sql server的安全性
2014/08/10 面试题
党校自我鉴定范文
2013/10/02 职场文书
安全演讲稿大全
2014/05/09 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
研究生导师推荐信
2014/09/06 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
离婚协议书的范本
2015/01/27 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
Golang ort 中的sortInts 方法
2022/04/24 Golang