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斑马线的更多相关文章

  1. jQuery table td可编辑

    参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...

  2. jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  3. Jquery Table 的基本操作

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  4. jquery table的隔行变色 鼠标事件

    一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...

  5. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  6. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  7. jquery table 发送两次请求 解惑

    版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...

  8. Jquery table相关--工时系统

    1.jquery 的弹出对话框,单击事件之后 if (confirm("确定要删除?")) { // //点击确定后操作 } 2.对某个table中的checkbox是否被选中的遍 ...

  9. 前端页面表格排序 jQuery Table 基础

    通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...

  10. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

随机推荐

  1. 学习OpenCV——鼠标事件（画框）

    #include "cv.h" #include "highgui.h" bool check_line_state=false; IplImage* work ...

  2. PHP Parse Error: syntax error, unexpected $end 错误的解决办

    可以在php.ini中设置short_open_tag = On 第一步,登录到sql命令行   第二步,使用sql语句修改root密码 使用sql语句改密码时一定要选中数据库 .使用 use mys ...

  3. C# 问题解决思路--《数组bytes未定义》，ASP.NET页面加载顺序

    好久没写博客了,废话不多说,直接说问题. 问题发生情况,首先这个是老项目,然后我是第一次修改.当我解决了各种引用,数据库配置之后等类似的问题,我启动的项目的时候,无任何问题,但是当我点击页面的按钮的时 ...

  4. fork子进程之间传输信息的方法(包含子进程与子进程之间区分的问题的解决)

    今天看到一道题,要求是父进程fork出两个子进程,子进程1需要给子进程2发送一个数据,然后子进程2再将这个数据发送给父进程 具体思想如下. 父进程fork出来的子进程的pid,只有父进程保存下来了, ...

  5. [转]iis7.5+win2008 出现 HTTP Error 503. The service is unavailable.

    解决: 应用程序池启动32位应用程序 设置托管管道为集成 (仍然有问题) 试试以下方法: http://phpwind.me/1222.html 楼主  发表于: 2011-11-26     图片: ...

  6. JS获取项目根目录

    function getRootPath(){ //获取当前网址,如: http://localhost:8088/test/test.jsp var curPath=window.document. ...

  7. 关于MVC4中EFCoderFirst 数据迁移的三句经典指令

    首先输入这句指令     enable-migrations -contexttypename SchoolContext  ---------(SchoolContext为你设置的数据库名)它会自动 ...

  8. logstash5.x改变

    5.x版本 logstash中 elasticsearch插件的workers,无法配置大于1,会提示 This plugin uses the shared and doesn't need thi ...

  9. 动态LOV语句、向具有LOV的ITEM赋值时报FRM-40212需要验证错误

    网上解决方法: http://www.itpub.net/thread-845812-2-1.html http://blog.csdn.net/rfb0204421/article/details/ ...

  10. Another app is currently holding the yum lock; waiting for it to exit...另一个应用程序在占用yum lock，等待其退出。

    这种情况下通常是由于yum的时候意外退出造成的,虽然也给出提示当前占用进行的id,但是执行kill -9 3599 强制杀死进程后,情况依然没能改变. 备注:(-9是强制杀死) 主要原因是因为,yum ...