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 UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
validform表单验证的实现方法
Mar 08 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
Jquery读取URL参数小例子
2013/08/30 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python字典的常用方法总结
2019/07/31 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
python blinker 信号库
2022/05/04 Python