隔行变色---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() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
随机推荐
- 【bzoj1260】涂色paint[CQOI2007]（区间dp）
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1260 这道题其实和codeforces607B有点像,然而做过原题的我居然没看出来.. ...
- EF Code-First 学习之旅 Code First Conventions
协定是一系列的默认规则用来自动配置领域中的概念模型 1:类型发现 Code-First对包含DBSet属性的类型创建表(包括这些类型的所有引用类型) public class Student { pu ...
- EntityFramework 学习 一 Multiple Diagrams in Entity Framework 5.0
Visual Studio 2012 provides a facility to split the design time visual representation of the Entity ...
- 域名注册中EAP期间是什么意思
所谓域名申请期间的EAP指的是,域名优先注册期,行业上也称为“早期接入期”,这个期间的时间是由该域名所在的管理注册局定,而这个EPA期的时间长度也不一样,有的是一个星期,也有的长达两个星期. 域名EA ...
- 在移动端做查看日志信息的js
Vconsole.js下载这个js引入需要使用的html文件,当运行到页面是就会在右下角显示提示,点击就出出现像pc端上的控制台页面 在线查看的网址 http://console.hongliang. ...
- jmeter ant 运行 提示Error occurred during initialization of VM
运行ant提示错误 网上找到的方法 将set HEAP= -Xms512m -Xmx1024m 改成set HEAP= -Xms512m -Xmx512m 保存后运行成功
- 【VS2013编译DirectX Tutorials时遇到的错误】"const wchar_t *" 类型的实参与 "LPCSTR" 类型的形参不兼容
本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/3696367.html 通过查看LPCSTR的定义: typedef _Null_te ...
- 04-THREE.JS 添加、删除物体，批量操作
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- 分布式事务_02_2PC框架raincat源码解析-启动过程
一.前言 上一节已经将raincat demo工程运行起来了,这一节来分析下raincat启动过程的源码 主要包括: 事务协调者启动过程 事务参与者启动过程 二.协调者启动过程 主要就是在启动类中通过 ...
- 把数据库里面的数据导出来csv
function export_csv($filename, $data, $head = '') { $string = $head; foreach ($data as $key => $v ...