隔行变色---bai
<!DOCTYPE html>
<html>
<style>
.mousein
{
background-color:blue;
cursor: pointer;
}
.odd
{
background-color: gray;
cursor: pointer;
}
</style>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery.js" >
</script>
<body>
<script>
$(document).ready(
function ()
{
//1 填充20行
var html = "";
for(var i=0;i<20;i++)
{
html += "<tr><td>"+(i+1)+"</td></tr>";
}
$("table").html(html);
//2 实现隔行变色
$("tr:odd").addClass("odd");
$("tr:odd").mouseover(
//当鼠标移动进去时，添加伪类
function()
{
$(this).removeClass("odd");
$(this).addClass("mousein");
}
);
$("tr:odd").mouseout(
function()
{
$(this).removeClass("mousein");
$(this).addClass("odd");
}
);
$("tr:odd").click(
function()
{
alert("这是第"+$(this).text()+"行！");
}
);
}
);
</script>
<table border="1" width="50%">
</table>
</body>
</html>
隔行变色---bai的更多相关文章
- jQuery知识点二 实现隔行变色
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- css 隔行变色，表单布局
隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ background:# ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- JS实现隔行变色，鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动(附源码)
介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...
- ReportingService 通过RowNumber函数获取行号和生成隔行变色样式
以前一直没有搞明白SSRS里面的RowNumber函数到底该怎么用,所以一直没有很好的办法在SSRS中的表格上实现隔行变色的样式,实现隔行变色的关键就是获取表格中每一行的行号.在最近了解了下这个函数, ...
- css选择器，用来处理隔行变色的表格
CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
随机推荐
- HDFS存档
Hadoop存档 每个文件均按块方式存储,每个块的元数据存储在namenode的内存中,因此Hadoop存储小文件会非常低效.因为大量的小文件会耗尽namenode中的大部分内存.存储小文件所需的磁盘 ...
- 汇编笔记 RET
assume cs:code,ss:stack stack segment db dup() stack ends code segment mov ax,4c00h int 21h start: m ...
- Codeforces Round #373 (Div. 2) E. Sasha and Array 矩阵快速幂+线段树
E. Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input standard ...
- shell基础之书写需要用到的小工具
一.简单介绍 下面介绍几个可能不太常用但是面试题经常会用用到的小工具: 命令:cut 作用:截取某一个字段 '-d' 后面跟分隔字符,把字段分割为若干个区间. '-c' 后面接的是第几个字符,也可以是 ...
- 批量反编译class文件
首先得进入jad的路径中,一般都放在jdk的安装目录的bin中 进入到该目录中,否则无法使用jad命令. jad -o -r -d F:\src -s java F:\classes\**\*.cla ...
- Windows10安装Linux子系统
在win10上面可以直接在powershell里面安装Linux,具体步骤如下: 首先我们要打开Windows功能 在这里把勾打上 然后打开设置>>更新和安全>>针对开发人员, ...
- ActiveMQ 的客户端选项
本章重点 怎么使用独占式消费者 消息分组的威力 理解流和二进制大对象 容错传输 计划消息分发 简介 上一章我们介绍了 ActiveMQ 的代理特性,本章我们将学习 ActiveMQ 客户端的一些高级特 ...
- 导入工程“The import android cannot be resolved”错误
project - Properties - android 1.Project Build Target 勾选响应的SDK 2.default.properties文件,把target = andr ...
- LeetCode OJ：Binary Tree Zigzag Level Order Traversal（折叠二叉树遍历）
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- Mac 下 Mosquitto 安装和配置 (Mosquitto为开源的mqtt服务器)
官网:http://mosquitto.org/download/ 官网的介绍简单明了 Mac 下一个命令“brew install mosquitto” 安装成功了,还学会了brew 安装目录:/u ...