浏览 11529 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-24
最后修改：2010-01-31
希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。大牛们就掠过吧！
最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下： 鼠标经过高亮效果截图： 
再添加隔行换色以后效果图： 
但是此部分的隔行换色只能在IE上实现，其他浏览器没这个效果，希望哪位能够提提你的高见，实在是小弟我是初学者。 关键代码： CSS文件：
body {
font-size: 10pt;
}
.listView th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border: 1px solid #97c8ff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 11px;
background: #b9e6fd no-repeat;
}
.listView tr {
background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
cursor:hand;
}
.listView td {
border: 1px solid #97c8ff;
font-size:12px;
color: #4f6b72;
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
}
tr.over td {
background: #cccccc;
}
JS代码主要完成鼠标高亮效果：
$(document).ready(function(){
$("tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
});
鼠标隔行换色效果的实现在与CSS部分：
.listView tr {
background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
}
完整HTML文件代码：
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body {
font-size: 10pt;
}
.listView th {
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border: 1px solid #97c8ff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 11px;
background: #b9e6fd no-repeat;
}
.listView tr {
background-color:expression(this.rowIndex%2==0 ? "#F8F8F8":"#95bce2");
.listView td {
border: 1px solid #97c8ff;
font-size:12px;
color: #4f6b72;
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
}
tr.over td {
background: #cccccc;
}
</style>
<script>
$(document).ready(function(){
$("tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
});
</script>
</head>
<body>
<table class="listView">
<thead>
<tr>
<th>
基金编号
</th>
<th>
基金名称
</th>
<th>
发行日期
</th>
<th>
发行价
</th>
<th>
基金类型
</th>
</tr>
</thead>
<tr>
<td>003003</td>
<td>华夏现金增利</td>
<td>2009-5-12</td>
<td>2</td>
<td>货币型</td>
</tr>
<tr>
<td>003003</td>
<td>华夏现金增利</td>
<td>2009-5-12</td>
<td>2</td>
<td>货币型</td>
</tr>
<tr>
<td>003003</td>
<td>华夏现金增利</td>
<td>2009-5-12</td>
<td>2</td>
<td>货币型</td>
</tr>
<tr>
<td>003003</td>
<td>华夏现金增利</td>
<td>2009-5-12</td>
<td>2</td>
<td>货币型</td>
</tr>
<tr>
<td>003003</td>
<td>华夏现金增利</td>
<td>2009-5-12</td>
<td>2</td>
<td>货币型</td>
</tr>
</table>
</body>
</head>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-28
最后修改：2010-01-28
这样写也可以。
$(document).ready(function() {
$("tr").hover(
function(){ $(this).addClass("over"); },
function(){ $(this).removeClass("over"); }
);
});
参考文档: http://docs.jquery.com/Events/hover |
| 返回顶楼 | |
|
发表时间：2010-01-28
最后修改：2010-01-28
恩，在华夏基金做前端开发的，也许咱们是同一个办公室的。
你用的1.3.2的版本，可以写成是 $(function(){
$("tr").hover(
$(this).toggleClass("over");
)
});
没有细想，也许有不对的地方，错了请包涵 |
| 返回顶楼 | |
|
发表时间：2010-01-28
楼上，应该可以，我经常使用这种方法
|
| 返回顶楼 | |
|
发表时间：2010-01-28
jquery确实是简化了不少代码
|
| 返回顶楼 | |
