Table隔行变色的JavaScript代码
<table id="datatable">
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
<tr>
<td>脚本之家</td>
</tr>
<tr>
<td>www.jb51.net</td>
</tr>
</table>
<script>
function showtable(){
var color1 = "rgb(234,240,255)";
var color2 = "rgb(255,255,255)";
var bgColor = "rgb(255,255,193)";
var trs = document.getElementById("datatable").getElementsByTagName("tr");
for (var i=0;i<trs.length-1;i++){
if (i%2==0) {
trs[i].style.backgroundColor=color1;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color1;
}
} else {
trs[i].style.backgroundColor=color2;
trs[i].onmouseover = function(){
this.style.backgroundColor = bgColor;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = color2;
}
}
}
}
showtable()
</script>
转载于:https://www.cnblogs.com/rik28/p/3654678.html
Table隔行变色的JavaScript代码相关推荐
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
- html table隔行变色,使用CSS3实现表格隔行/隔列变色
废话少说,先看效果,如果不是你想要的,你可以撤了~ 这些都是css控制的,然后我们看下样式: table tr:nth-child(odd){background:#F4F4F4;} table td ...
- php表单的隔行变色,php 隔行变色的实现代码
在php编程中,最常见的一个实现就是动态输出数据,尤其是输出以表格显示的数据. 数据来源可以是xml文件,可以是数据库表中的数据,也可以是其它类型的数据,如csv.xls等. 如何以用户友好的方式显示 ...
- css 实现table 隔行变色
<html> <head> <title>Member List</title> <style> <!-- .datalist{bor ...
- table隔行变色与table单元格根据条件更改字体颜色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 隔行变色java代码_jquery入门—选择器实现隔行变色实例代码
1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机 ...
- 隔行变色java代码_纯js实现隔行变色效果
本文实例为大家分享了js实现隔行变色的具体代码,供大家参考,具体内容如下 function createTable(){ //创建表格 var table = document.createEleme ...
- php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
最新文章
- 数据结构|-常见数据结构整理
- 扩增子图表解读8网络图:节点OTU或类Venn比较
- MySQL返回多行错误怎么处理_结果包含多个行错误mysql
- 奖客富翁系统python_作业 2018-12-28 20.1 奖客富翁
- 【论文解读】GCN论文总结
- boost::hana::fold_right用法的测试程序
- php 控制器分组模式,控制器分组路由
- ES6(一) —— 异步编程解决办法[从回调函数到promise,generator,async]
- 关于计算机图形学的学习
- android studio 中怎么写aspectj代码,Android AOP三剑客之AspectJ
- EditPlus 3使用技巧收集
- Windows 超级终端设置
- 万物互联会改变什么?
- 1-10000内的素数c语言,输入1-10000的素数
- 【Python成长之路】基于sikuli jar包,实现淘宝自动抢单功能(1)
- 【系列1】使用Dockerfile创建带sshd服务的Centos Docker镜像
- AI上推荐 之 FiBiNET模型(特征重要性选择与双线性特征交叉)
- 关于cookie的详细讲解
- qiankun 2.x 运行时沙箱 源码分析
- 安卓手机主题软件_安卓必备APP大盘点:10款软件让你的手机脱胎换骨
热门文章
- PyQt5入门——QListWidget实现图片缩略图列表
- leetcode - 63. 不同路径 II
- 发动机悬置python仿真计算
- mt4 python神经网络_迈达克软件公司承认Python运算对量化交易的重要性----将Python与Metatrader 5集成一体...
- linux 怎么创建接口文件,我们如何在Linux上创建多个虚拟接口?
- java channel源码_java nio ServerSocketChannel源码分析
- python两数相加取_两数相加(Python3)
- python哪个专业开这个课程-深圳python课程
- python进行usb通讯_Python实现树莓派USB串口通讯
- java utf8转iso8859-1_Java字符编码处理(UTF-8/ISO-8859-1)之一 –读文本文件乱码问题 | 学步园...