[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过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/ ...
随机推荐
- jquery选择器的简单使用
1.$()可以是$(expresion),即css选择器.Xpath或html元素,也就是通过上述表达式来匹配目标元素. 比如:$("a")构造的这个对象,是用CSS选择器构建了一 ...
- tableviewcell滑动显示多个按钮UITableViewRowAction(转载)
demo截图 ios8 新的属性 typedef NS_ENUM(NSInteger, UITableViewRowActionStyle) { UITableViewRowActionStyleDe ...
- visible绑定(The "visible" binding)
对visible进行绑定可以控制元素的显示和隐藏. 示例: <div data-bind="visible: shouldShowMessage"> You will ...
- Mac 必备软件 Quicksilver
http://www.xdanger.com/2007/03/30/000067.html
- lucene 简单搜索步骤
1.创建IndexReader实例: Directory dir = FSDirectory.open(new File(indexDir)); IndexReader reader = Direct ...
- finally语句包含return的情况
结论:1.不管有木有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...
- 转:JMeter进行Java 请求测试
本文转自:http://blog.csdn.net/xiazdong/article/details/7873767 向原作者致敬,看了他的文章才让我顺利解决了JMeter测试中的问题,万分感谢! 目 ...
- Windows进程间通信(上)
一.管道 管道(pipe)是用于进程间通信的共享内存区域.创建管道的进程称为管道服务器,而连接到这个管道的进程称为管道客户端.一个进程向管道写入信息,而另外一个进程从管道读取信息. 异步管道是基于字符 ...
- IIS6 伪静态
1. 设置IIS--主目录--脚本映射那一个属性 2.必须还要上传自己的urlrewriter组件,并在config里做相应的设置 二者缺一不可
- mysql常用命令使用技巧
一.连接Mysql格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...