隔行变色---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() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
随机推荐
- Fatal error: cannot create 'R_TempDir'
[user@mgmt dir]$ R Fatal error: cannot create 'R_TempDir' [user@mgmt dir]$ ll -ad /tmp drwxrwxrwt. 2 ...
- 派派和京东的paipai域名之争
最近有一款叫“派派”的APP很火,微博上.电梯里.群里到处都是推广广告.不仅如此,还有大张伟.关晓彤.王祖蓝等十几个明星发帖为“派派”站台.有消息称,派派这段时间仅线上推广就花去了约1600万. 总融 ...
- Virtio SCSI设备介绍
Qemu的存储栈 在KVM虚拟化环境中,当客户机的内核存储系统像在物理机上一样通过页缓存.文件系统.通用块设备层运行到实际设备驱动时,这时驱动对设备寄存器的访问会触发CPU从客户机代码切换到物理机内的 ...
- Angular中文api
Angular中文api:http://docs.ngnice.com/api
- hibernate学习（1）
对象的持久化 狭义的理解,“持久化”仅仅指把对象永久保存到数据库中 广义的理解,“持久化”包括和数据库相关的各种操作 -保存:把对象永久保存到数据库中 -更新:更新数据库中对象的状态 -删除:从数据库 ...
- review19
StringBuffer类 String类创建的字符串对象是不可修改的,也就是说,String字符串不能修改.删除或替换字符串中的饿某个字符,即String对象一旦创建,那么实体是不可以再发生变化的. ...
- Composer 入门使用手册
依赖管理 官网地址:http://docs.phpcomposer.com/00-intro.html#Locally Composer 不是一个包管理器.是的,它涉及 "packages& ...
- mongodb数据文件结构——record是内嵌BSON的双向链表，多个record或索引组成extent
数据文件结构 Extent 在每一个数据文件内,MongoDB把所存储的BSON文档的数据和B树索引组织到逻辑容器“Extent”里面.如下图所示(my-db.1和my-db.2 是数据库的两个数据文 ...
- mysql创建数据库表
CREATE TABLE `product_info` ( `product_id` VARCHAR() NOT NULL, `product_name` VARCHAR() NOT NULL COM ...
- Codeforces Round #281 (Div. 2) A. Vasya and Football(模拟)
简单题,却犯了两个错误导致WA了多次. 第一是程序容错性不好,没有考虑到输入数据中可能给实际已经罚下场的人再来牌,这种情况在system测试数据里是有的... 二是chronologically这个词 ...