[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。
window.onload = function () {
document.getElementById('btn').onclick = function () {
var trs = document.getElementById('tb').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
if (i % 2 != 0) {
trs[i].style.backgroundColor = 'yellow';
} else {
trs[i].style.backgroundColor = '';
}
}
};
};
<input type="button" name="name" value="变色" id="btn" />
<table id="tb" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
</tr>
<tr>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
</tr>
<tr>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
</tr>
<tr>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
<td>
AAAAAAAAAAAAAAAAAA
</td>
</tr>
</table>
[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。的更多相关文章
- JS实现表格隔行变色
用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Openjudge-计算概论(A)-称体重
描述: 赵.钱.孙.李四个人中既有大人也有小孩,给他们称体重时发现,他们每个人的体重都不一样,且体重(单位:公斤)恰好是10的整数倍,且他们的体重都不高 于50公斤,已知赵.钱两人的体重之和恰好等于孙 ...
- tableviewcell滑动显示多个按钮UITableViewRowAction(转载)
demo截图 ios8 新的属性 typedef NS_ENUM(NSInteger, UITableViewRowActionStyle) { UITableViewRowActionStyleDe ...
- ubuntu下打开chm文件
CHM文件格式是微软1998年推出的基于HTML文件特性的帮助文件系统,以替代早先的WinHelp帮助系统,它在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件”. chm文件因为 ...
- git: reset
git reset --hard:把commit撤销,意思是不仅此次commit提交的文件从本地版本库的状态重置,而且把此次commit的文件也从本地目录中删除 所以如果你执行之后发现,git sta ...
- GetWindowRect和GetClientRect的异同
由于项目需要,需要学习CGridCtrl控件的使用,测试控件时发现了一个问题,我无法将控件放在对话框的制定位置. 该问题的原因很容易发现,其实就是GetWindowRec()函数和GetClientR ...
- 局部内部类访问方法的参数和局部变量必须是final的
内部类的种类一共分为四种,我看其他几种内部类的时候思路都是很清晰的,然后我就碰到了这一条:"方法中的内部类可以访问外部类成员.对于方法的参数和局部变量,必须有final修饰才可以访问&quo ...
- ios xcode中所有自带的字体如下(最好结合NSMutableAttributedString相结合使用)
// 打印系统中所有字体的类型名字 NSArray *familyNames = [UIFont familyNames]; for(NSString *familyName in familyNam ...
- Chapter 1 First Sight——37
"Never mind, then," he said hastily in a voice like velvet. 别介意,他用天鹅绒般的声音急切的说道 "I can ...
- 第三十九节,python内置全局变量
vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...
- 如何获取网页验证码图片并保存到本地(Java实现) [问题点数:40分,结帖人lanxuezaipiao]
http://bbs.csdn.net/topics/390426978 public static String readCheckImage(HashMap<String, String&g ...