JavaScript for循环实现表格隔行变色
本代码主要演示的是for循环,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript for循环实现表格隔行变色</title>
<script>
window.onload=function () {
oTab = document.getElementById('tab1'); for(var i=0;i<oTab.tBodies[0].rows.length; i++){
if(i%2){
oTab.tBodies[0].rows[i].style.backgroundColor='green';
}else {
oTab.tBodies[0].rows[i].style.backgroundColor='lightgreen'
}
} }
</script>
</head>
<body>
<table id="tab1" width="500px" border="1px grap solid">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Apollo</td>
<td>28</td>
</tr>
<tr>
<td>02</td>
<td>Ann</td>
<td>25</td>
</tr>
<tr>
<td>03</td>
<td>Merry</td>
<td>26</td>
</tr>
<tr>
<td>04</td>
<td>John</td>
<td>26</td>
</tr>
<tr>
<td>05</td>
<td>Eva</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
JavaScript for循环实现表格隔行变色的更多相关文章
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- JS实现表格隔行变色
用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Excel Sheet Column Title - LeetCode
Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...
- Java中final和static关键字总结
1.final: final关键字可用于类.方法.变量前. final修饰的类不可被继承,例如java.lang.Math就是一个 final类,不可被继承. final修饰变量,在显示初始化后不可改 ...
- 真正解决 thinkphp 验证码 出错 无法显示 问题
今天做到验证码这一块想到tp自带验证图片 大喜单鼓捣半天不出来 一直是个小 X 官方提示:如果无法显示验证码,请检查:² PHP是否已经安装GD库支持:²输出之前是否有任何的输出(尤其是UTF8的B ...
- django admin页面样式丢失问题
wamp 配置django admin页面样式丢失问题 第一种方法:在apache配置文件httpd.conf中加入如下代码:Alias /static "E:\Python27\Lib\s ...
- linux网络管理之网络基础
iso/osi模型 OSI七层框架每层作用 应用层:用户操作的层 表示层:二进制数据与显示数据之间的转换,也是加密的地方 会话层:确定网络传输还是本地存储,是邮件还是ppt等 传输层:确定tcp还是u ...
- hdu 5381 The sum of gcd(线段树+gcd)
题目链接:hdu 5381 The sum of gcd 将查询离线处理,依照r排序,然后从左向右处理每一个A[i],碰到查询时处理.用线段树维护.每一个节点表示从[l,i]中以l为起始的区间gcd总 ...
- 后台CMS日志处理记录
自从上一次添加了极光推送之后,我的工程就像是着魔了一样,不管怎么调整,日志级别都是DEBUG. 启动一次工程会打印很多无用日志,今天决定抽时间去研究了一下,最终解决了问题,下面记录一下解决过程. 1. ...
- 【SQLServer】Microsoft SQL Baseline Checklist
今天调查了Microsoft SQL Baseline Checklist中的下面几个问题. Hide Instances Extended Store Procedures Maximum Numb ...
- HDU 5301(Buildings-贪心构造)
Buildings Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Tota ...
- UNP学习笔记(第一章 简介)
环境搭建 1.下载解压unpv13e.tar.gz 2.进入目录执行 ./configurecd lib //进入lib目录make //执行make命令 3.将生成的libunp.a静态库复制到/u ...