点击按钮实现隔行变色

[原]点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过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

前端切图|点击按钮div变色

<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta charset="utf-8" /> </head> <body>  <div style="width:300px;height:30px

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素和表格类型 ) 2,一个页面内支持不同模块隔行变色,分别管理 3,可以定制的配置有: 奇/偶数行的背景颜色特定的模块加上隔行变色当前激活行的颜色隔行变色的元素类型定制 { 'activeClass' : 'active', 'evenClass' : 'even-color', 'oddClass' : 'odd-col

案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font-size: 20px; } #login{ width: 500px; height: 500px; background: gray; display: none; position: absolute; left:; top: 50px; } </style> <div class=&

简单的css js控制table隔行变色

(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td { onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgro

jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门的美工人员和前端人员,所以这个工作我就担当起来.后端的代码是我的本职工作,没有话说.前端的东西就比较麻烦了.我最开始工作之初也做过美工,由于本人有绘画的功底,但是后来就把主要的经历放在了服务端代码了,因为大部分公司都会有前端人员来完成相应的工作. 当前的公司在技术方面没有什么积累,所以,所有的代码都

隔行变色---简单的css js控制table隔行变色

(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td { onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgro

HTML系列：js和css多种方式实现隔行变色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>两种方式让css隔行变色js和css3属性.box li:nth-of-type</title>

JS实现表格隔行变色

用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(thead 里面的行)不需要变换颜色,改变的是 tbody 里面的行. 1.获取元素,获取的是 tbody里面的行. 2.循环注册绑定事件,将 tbody 里面全部的行都得到,然后全部都注册鼠标经过和离开事件. 3.所有行绑定鼠标经过事件,鼠标经过当前元素(this)改变颜色: 4.所有行绑定鼠标离开事

jQuery知识点二实现隔行变色

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>隔行变色</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <style type=&quo

css 隔行变色，表单布局

隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ background:#ffcc00;}偶数行 #list2 li:nth-child(4n+1){ background:#00ccff;}从第一行开始算起每隔4个(包含第四个)使用此样式 #list00000 li:nth-child(4n+2){background:#090;}从第二行开始算起每隔4个(包含

jquery实现html表格隔行变色

效果图实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 实现表格隔行变色 </title> <meta http-equiv=

使用js实现点击按钮下载文件

有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时, 首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 <link href="libs/font-awesome-4.7.0/css/font-a

1:时间戳转换成年月日函数，2:url截取参数方法，3:弹窗自定义方法 4:点击按钮加入购物车

最近一直在使用vue.js来构建项目,先分享一下一些简单可复用的函数. 1:时间戳转换Date.prototype.format = function(fmt){ //author: yumeiqiang var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "w+":'星期'+this.getDay(), "h+": this.getHours

ASP.NET点击按钮弹出确认对话框方法

开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = "javascript:return confirm('您确定删除吗?一旦删除将无法恢复!');"; 或 Button.Attributes.Add("OnClick", "javascript:return confirm('您确定删除吗?一旦删除将无法恢

React 点击按钮显示div与隐藏div，并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

如何点击按钮后在加载外部的Js文件

或许有朋友遇到过,想等自己点击按钮之后才执行某一个js文件,那么,你运气好,看到了我的代码了哈哈, <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <scri

jquery插件之表格隔行变色并鼠标滑过高亮显示

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

使用Android点击按钮跳转页面

1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中的Android Activity,选择BlankActivity,修改一个Activity的名字(自定义),我这里命名为BankActivity,点选finish然后新建完成一个返回页面;\ 3.接下来就要添加布局文件了,我们在res文件下的layout文件里先双击activity_main.xm

JS实现隔行变色，鼠标移入高亮

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 {

devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动(附源码)

介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和OptionsView-->EnableAppearanceOddRow-->true;然后设置奇数行和偶数行样式颜色等:Appearance-->EvenRow和Appearance-->OddRow.设计完成后,设计器出现隔行变色效果,如图: 2.设置奇偶行样式时,会看到其他行样式.App

点击按钮实现隔行变色

热门专题