基于jQuery的表格样式

最新推荐文章于 2022-04-14 16:43:30 发布

a752711024

最新推荐文章于 2022-04-14 16:43:30 发布

阅读量438

点赞数

分类专栏：表格文章标签： jQuery JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/a752711024/article/details/83533629

版权

表格专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下：
希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。

效果截图：

HTML文件代码：

Java代码

<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 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>

a752711024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery的表格样式

最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下：希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。效果截图： HTML文件代码：Java代码 &lt;html&gt; &lt;head&gt;...
复制链接

扫一扫