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 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Angular2之二级路由详解
Aug 31 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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Python中删除文件的程序代码
2011/03/13 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python绘制圆柱体的方法
2018/07/02 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
使用pandas读取文件的实现
2019/07/31 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
教师实习自我鉴定
2013/12/18 职场文书
同意迁入证明模板
2014/10/26 职场文书
五一劳动节活动总结
2015/02/09 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Python进程池与进程锁之语法学习
2022/04/11 Python