jQuery实现表格隔行实现颜色

何枫abc

浏览: 230043 次
性别:
来自: 深圳

最近访客更多访客>>

htmails

海清xx8

lijizh1013

jiangcon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jQuery Eclipse JavaScript QQ HTML

Eclipse 支持jQuery 自动提示
1.Eclipse安装 spket 插件。（两种方式）：
在线安装：Help->Install New Software...->Add...->Name:"Spket",Location:http://www.spket.com/update/下载完毕重启 Eclipse 。
手动安装：到http://www.spket.com/download.html下载 Plugin 版本，当前版本为1.6.17。下载解压后直接放置于Eclipse的dropins目录下，重启Eclipse.
2.下载jQuery文件，（要下载开发版本）。
3.设置spket。
Window -> Preferences -> Spket -> JavaScript Profiles -> New ；输入“jQuery”点击OK；选择“jQuery” 并点击“Add Library”然后在下拉条中选取“jQuery”；选择 “jQuery”并点击“Add File”，然后选中你下载的jQuery.js 文件；设成Default;
4,设置js打开方式。
Window -> Preferences ->General-> Editors-> File Associations-> 选择*.js 将 Spket JavaScript Editor设为Default。
5，新建一个js文件，jQuery 自动提示！！
但不知道是为什么jQuery-1.4.3.js放到(File Associations)中js文本不给自动提示,藐似只有之前的版本文件才给提示

pageEncoding="utf-8"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
<html>
<head>
<script type="text/javascript"

src="jquery/jquery-1.4.3.js"></script>

<script language="javascript">

$(document).ready(function() {

$(".csstab tr").mouseover(function() { //当鼠标移到class为csstab的表格的tr上时,执行函数

$(this).addClass("over");   //给这行添加class值为over

}).mouseout(function() { //鼠标离开

$(this).removeClass("over"); // 撤销class值为over

});

$(".csstab tr:even").addClass("alt"); //表格为偶数行的添加class值为alt $("tr:even")所有偶数行 $("tr:odd")所有奇数行

});
</script>
<style type="text/css">
<!--
th {
background: #0066FF;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
td {
padding: 6px 100px;
border-bottom: 1px solid red;
vertical-align: top;
text-align: center;
}
td * {
 padding: 6px 100px;
}
tr.alt td {
background: bule; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background: red; /*这个将是鼠标高亮行的背景色*/
cursor: pointer;
}
-->
</style>
</head>
<table width="400" cellspacing="0" class="csstab" cellpadding="2" align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>QQ</th>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td>opper</td>
<td>23</td>
<td>男</td>
<td>56791700</td>
</tr>
<tr>
<td colspan="4"> 分页</td>
</tr>
</table>
</html>