JQuery-Table斑马线
HTML
<html>
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="Jquery.js" type="text/javascript"></script>
<script src="JavaScript.js" type="text/javascript"></script>
</head>
<title>斑马线</title>
<body>
<div id="bodydiv">
<table cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr>
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr>
<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>
</tr>
<tr>
<td>6</td>
<td>Speed</td>
<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr>
<td>8</td>
<td>Sore</td>
<td>Buck 65</td>
</tr>
<tr>
<td>9</td>
<td>Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS(StyleSheet.css)
body
{
width:100%;
height:100%;
margin:auto;
text-align:center;
}
#bodydiv
{
height:100%;
}
table
{
width: 100%;
}
JS(Jquery.js)
$(function(){
//tr:eq(0)是指第一个tr eq=equal
//tr:gt(0)是指除去第一个以外的所有tr gt=grater than
$("tr:eq(0)").css("background-color","#8888ff"); //标题的样式
$("tr:gt(0):even").css("background-color","#ffffcc"); //奇数行的样式
$("tr:gt(0):odd").css("background-color","#ccccff"); //偶数行的样式
$("tr:gt(0)").mouseenter(function(){
var color = $(this).css("background-color");
$(this).css("background-color","#5555ff");
$(this).mouseleave(function(){
$(this).css("background-color",color);
});
$(this).mousedown(function(){
$(this).css("background-color","#2222ff");
});
$(this).mouseup(function(){
$(this).css("background-color","#5555ff");
});
});
});
ref: http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html
源码下载：http://files.cnblogs.com/zisezhixin/斑马线.zip
JQuery-Table斑马线的更多相关文章
- jQuery table td可编辑
参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...
- jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- Jquery Table 的基本操作
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- jquery table的隔行变色 鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- jquery table 发送两次请求 解惑
版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...
- Jquery table相关--工时系统
1.jquery 的弹出对话框,单击事件之后 if (confirm("确定要删除?")) { // //点击确定后操作 } 2.对某个table中的checkbox是否被选中的遍 ...
- 前端页面表格排序 jQuery Table 基础
通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...
- [Js/Jquery]table行转列
摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...
随机推荐
- Java基础之一组有用的类——使用公历日历（TryCalendar）
控制台程序. 公历是西方使用的日历,用GregorianCalendar类的对象来表示.GregorianCalendar对象封装了时区信息.日期和时间数据.GregorianCalendar对象有7 ...
- Cocoapods注意点
1 安装和升级$ sudo gem install cocoapods $ pod setup 2 更换为taobao的源 $ gem sources -r https://rubygems.org/ ...
- ls常用参数
ls常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 玩Linux的老司机们每天都要敲的命令,但是这个鸡蛋的命令还有很多中玩法哟~跟着我一起敲一遍吧!在这里我就列举几个常 ...
- Python和Ruby抓取网页时的中文乱码问题(在Eclipse和Apatana Studio下均是这种解决方法
Python抓取中文网页乱码 :Eclipse+pydev2.2+python2.7 :Apatana Studio3+ pydev2.2+python2.7 run时设置 run--&g ...
- React-Native坑1：Invariant Violation:Application 项目名 has not been registered.
React-Native坑1:Invariant Violation:Application 项目名 has not been registered. 字数347 阅读1421 评论3 喜欢7 前言 ...
- C#委托实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace we ...
- cocos2dx建立项目
http://www.cocos.com/doc/article/index?type=wiki&url=/doc/cocos-docs-master/manual/framework/nat ...
- 夺命雷公狗ThinkPHP项目之----企业网站19之网站配置信息的修改
我们这个其实也是很简单的,思路是直接将提交过来的cf_id 改成我们自己定义好的 “1” 即可,因为1配置只能有一个,所以永久都是该id 为1的: 先来完成我们的控制器,代码如下所示: public ...
- 夺命雷公狗---微信开发13----获取access_token
获得Access Token的方法1: 这里可以手动进行修改: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential ...
- [转]乐死我了，怎么样成为一个全栈程序员（Full Stack Developer），附我想专注的语言
受苏格拉底大神的启迪,我也来谈谈全栈.禅师:成为全栈工程师,这个问题等于如何成为全才,有可能吗码农:有可能,不过可能性比较低,因为达芬奇这类人毕竟是百年一遇的奇才.不过,因为我热爱这个行业,也有一定天 ...