[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过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/ ...
随机推荐
- js自定义的简易滚动条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 网络模块(net, http)小解
net模块可用来创建TCP服务器来接收网络请求,它提供了创建客户端以及服务端的方法 服务端: 创建服务器: net.createServer([,options], connectionListene ...
- ios NSComparator 三种枚举类型
NSComparator有3种枚举类型 NSOrderedDescending 降序,但是用他可以实现升序或者降序都没问题. NSOrderedAscending 升序,但是目前没有使用出任何效果.. ...
- php 分页类(1)
inter.php <head> <meta http-equiv="Content-Type" content="text/html; charset ...
- kloxo面板教程-折腾了一天
------------------------------------------------------------------------------- 前一晚安装了掉线,不得不重新来,有点慢, ...
- 第四十二节,configparser特定格式的ini配置文件模块
configparser用于处理特定格式的文件,其本质上是利用open来操作文件. 特定格式的ini配置文件模块,用于处理ini配置文件,注意:这个ini配置文件,只是ini文件名称的文本文件,不是后 ...
- 按钮特效-Enter键自动提交表单
—————————————————————— <script type="text/javascript"> //当用户按 ...
- Git的Bug分支----临时保存现场git stash
软件开发中,bug就像家常便饭一样,有了bug就需要修复,在Git中,由于分支是如此的强大,所以每个bug通过一个新的分支来修复,在修复后,合并分支,然后将临时分支删除. 当你接到一个修复代号为119 ...
- js获取后台json数据显示在jsp页面元素
jsp id <font size=2 >Today:</font> <font id ="todaytotal" size=2 color=&quo ...
- Sublime text 3 如何格式化HTML代码
使用Sublime text 3 编写代码是一种享受,使用Sublime text 3 格式化HTML代码,需要安装插件,具体安装步骤如下: 1.打开菜单->首选项->插件控制,输入 ...