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模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JS重载实现方法分析
Dec 16 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
.NET面试10题
2014/02/24 面试题
考博自荐信
2013/10/25 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
班干部演讲稿
2014/04/24 职场文书
文明班集体申报材料
2014/05/23 职场文书
幽灵公主观后感
2015/06/09 职场文书
看雷锋电影观后感
2015/06/10 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript