[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过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/ ...
随机推荐
- Chapter 14_2 全局变量声明
Lua中的全局变量不需要声明就可以使用.对于小程序十分方便,但是大型程序中 一处简单的笔误就可能造成难以发现的bug. 不过,这种性能可以改变.由于Lua将全局变量放在一个普通的table中,可以通过 ...
- MVC jsonModelBuilder
/// <summary> /// JsonModelBinderAttribute /// author:BearLee /// 2015/5/20 11:48:40 /// </ ...
- Erlang OTP gen_event
转自:http://www.myexception.cn/program/1569725.html Erlang OTP gen_event (0) 原英文文档:http://www.erlang.o ...
- erlang分布式编程模型
erlang分布式编程有两种模型 一.分布式erlang 运行在可信的网络环境中 1.rpc提供的远程过程调用 rpc:call(Node,Mode,Fun,Args) ->Result|{ba ...
- (╭ ̄3 ̄)╭ 小希的迷宫II
(╭ ̄3 ̄)╭ 小希的迷宫II TimeLimit: 2000/1000 MS (Java/Others) MenoryLimit: 65536/32768 K (Java/Others) 64-b ...
- Activity之间的隐士跳转
/** * 方法一:在构造函数中指定 */ /*Intent intent=new Intent(this,TwoActivity ...
- redis------del命令
删除 可以删除给定的一个或多个key; set keyname1 name1 set keyname2 name2 set keyname3 name3 del keyname1 keyname ...
- android代码格式化方法小结
转载:http://blog.csdn.net/androidzhaoxiaogang/article/details/7692526 Download the android-formatting. ...
- Chapter 1 First Sight——25
"They are… very nice-looking." I struggled with the conspicuous understatement. 他们都很好看,我与轻 ...
- 《JS权威指南学习总结--第四章4.9.1相等和严格相等》
内容要点: 一. 严格相等运算符"===" 首先计算其操作数的值,然后比较这两个值,比较过程没有任何类型转换: 1.如果两个值类型不同,则它们不 ...