隔行变色---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() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
随机推荐
- Elasticsearch-->Get Started-->Basic concepts
https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started-concepts.html There ...
- 设置本地wamp环境挂载多站点同时运行
之前写过一篇关于在Linux环境下配置虚拟主机的文章:现在又有一种场景:在本地同时写多个项目:可本地的wamp环境下默认只有一个www目录:这样经常修改目录很痛苦:那么幸福就这么猝不及防的来了:下面就 ...
- SpringMVC中响应json数据（异步传送）
1.首先导入3个jar包: jackson-annotations-2.1.5.jar jackson-core-2.1.5.jar jackson-databind-2.1.5.jar JSON所需 ...
- Spring初学之使用外部配置文件dataSource
一.在Spring的基础上还要另外导入c3p0包和mysql的驱动包. 二.配置文件, jdbc.propertices:这里只做了一些简单配置 user=root password=123 driv ...
- 爬虫之MongoDB
一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库. 不采用关系型主要是为了 ...
- 从AD域获取用户AD信息
public static Dictionary<string, string> SearchADInfo(string adName) { string strTemp = " ...
- 【Window Service】关于Window Service的两三事
引言 Window Service通常用于寄宿WCF服务或者定时作业.下面记录一下它的用法. 创建 创建Window Service项目后,可以看到Program和Service1类.Program ...
- kylin_异常_02_java.lang.NoClassDefFoundError: org/apache/hadoop/hive/conf/HiveConf 解决办法
一.异常现象 在kylin的web管理界面,设置hive数据源时,报错: 查找kylin的日志时发现,弹出提示框的原因是因为出现错误: ERROR [http-bio-7070-exec-10] co ...
- xml获取指定节点的路径
引用自http://www.w3school.com.cn/xpath/xpath_syntax.asp XPath 语法 Previous Page Next Page XPath 使用路径表达式来 ...
- hdu5087 Revenge of LIS II (dp)
只要理解了LIS,这道题稍微搞一下就行了. 求LIS(最长上升子序列)有两种方法: 1.O(n^2)的算法:设dp[i]为以a[i]结尾的最长上升子序列的长度.dp[i]最少也得是1,就初始化为1,则 ...