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的Function详细
Nov 14 Javascript
Javascript 继承实现例子
Aug 12 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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
新52大事件
2020/03/03 欧美动漫
解析php如何将日志写进syslog
2013/06/28 PHP
php mail to 配置详解
2014/01/16 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python中Collection的使用小技巧
2014/08/18 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
公司成立感言
2014/01/11 职场文书
英语专业求职信
2014/07/08 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
推广普通话的宣传语
2015/07/13 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python