隔行变色---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() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
随机推荐
- <转载>获取运行中的TeamViewer的账号和密码
#define WIN32_LEAN_AND_MEAN #include <windows.h> #include <iostream> #pragma comment( li ...
- vijos 1250 最勇敢的机器人 分组背包+并查集
P1250最勇敢的机器人 背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述 机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n ...
- form组件的总结
1.form组件(******) 局部钩子 全局钩子 ''' 实例化时: self.fields={ "username":"字段规则对象", "pa ...
- js工厂方法
工厂方法与简单工厂的区别在于工厂方法没有switch条件分支,实例化哪一个子类放到了客户端(可以利用反射),这样整个工厂和产品体系都没有修改的变化,而只是扩展的变化,这就完全符合了开放-封闭原则的精神 ...
- 迭代式返回 IEnumerable<T>
private IEnumerable<PoliceForceViewModel> CreateResultList(IEnumerable<GPSData> gpsData) ...
- tortoisegit推送ssh-key需要输入用户信息
修改了测试代码,却在提交代码时候又跳出来请输入用户名和密码, 后来发现,github push有两种方式,ssh方式和https方式.而https方式是不同的,具体来说,就是url信息的不同,实际的验 ...
- The tag handler class for "home.jsp" (org.apache.taglibs.standard.tag.rt.core.ForEachTag) was not found on the Java Build Path
web.xml中 listener,filter,servlet需按顺序. <listener> <listener-class>listener.VisitCountList ...
- Linux中的固件加载例子
AP6335模块(BCM4339)在上电运行时,是需要刷入固件的,其在普通WIFI模式和AP模式之间切换时,也是需要加载不同的固件的,其位于/system/etc/firmware/下面:fw_bcm ...
- hadoop2.5.2 安装与部署
主从机构 主:jobtracker 从:tasktracker 四个阶段 1. split 2. Mapper: key-value(对象) 3. shuffle a) 分区(partition,H ...
- js字符串和数组操作，容易混淆的方法总结（slice、substring、substr、splice）
平时工作中,很少静下心来总结基础知识,总觉得自己会用了,有点飘了,直到碰壁之后才懂得基础知识的重要性.大牛告诉我,一次写对,是不是可以不用F12去调试了?是不是省了时间?简直是面红耳赤,无地自容.在这 ...