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玩转继承(三)
May 08 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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/02 无线电
一个SQL管理员的web接口
2006/10/09 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python文件和目录操作详解
2015/02/08 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
创业资金计划书
2014/02/06 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
学生检讨书范文
2019/06/24 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python