[原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过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/ ...
随机推荐
- 请问如何查询一个APP的Android和iOS下载量?
作者:Jasmine Jiang链接:http://www.zhihu.com/question/28533067/answer/87871598来源:知乎著作权归作者所有,转载请联系作者获得授权. ...
- javascript动画效果之匀速运动
html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间 <!DOCTYPE html> <html> <head> ...
- Javascript的精华
一.语法 JS只有一个数字类型,64位浮点数,所以1和1.0是相同的.为什么这么设计:防止短整型的溢出. 二.对象 1.通常将一个对象的值赋给另一个变量的赋值方法 if(car.name!=null) ...
- WPF类层次结构
WPF类层次结构 System.Threading.DispatcherObject类 WPF应用程序使用STA(Single Thread Affinity)模型,整个用户界面由一个单独的线程拥有, ...
- webservice简介及客户端搭建
在环境变量中,CLASSPATH添加D:\apache-cxf-2.4.2\lib 新建CXF_HOME D:\apache-cxf-2.4.2 在PATH中添加 D:\apache-cxf- ...
- Centos6.6升级python版本
centos原生python为2.6.6,可以通过下面的命令查看 #python -V Python 注:在安装新版本前,请先安装zlib\openssl组件,如果你确认你用不到这个,也可以不装 需要 ...
- Android.mk简单分析
LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE_TAGS := optional LOCAL_SRC_FILES := $ ...
- C#获取键盘和鼠标操作的时间的类
/// /// 创建结构体用于返回捕获时间 /// [StructLayout(LayoutKind.Sequential)] struct LASTINPUTINFO { /// /// 设置结构体 ...
- Fine Uploader 简单配置方法
由于jquery.uploadify是基于flash的jquery上传控件,客户老是说出问题,所以今天换成了一个纯js的异步上传控件. 这方面的资料很少,故此记下来分享一下. 项目地址:Fine Up ...
- C++ 中 const和define的区别
来源网址:http://wujiangping.blog.163.com/blog/static/195182011201255115125205/ 请区别用#define命令定义的符号常量和用con ...