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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
php文件包含的几种方式总结
2019/09/19 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python docx库用法示例分析
2019/02/16 Python
python快排算法详解
2019/03/04 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
普通党员个人对照检查材料
2014/09/18 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js