今天在开发时，有个需求，表格太长需要滚动显示里面的内容。经过调试，通过javascript来实现，代码如下
<script type="text/javascript">
(function() {
// 表格滚动
var num = 0;
var $table = $("#touzi-div table");
var len = $table.find("tr").length;
var scroll_total = Math.ceil(len/5);
if(scroll_total>1){
setInterval(function(){
num++;
var mtop = -num*190;
if(num == scroll_total){
$table.animate({marginTop:'0px'},500);
num = 0;
return false;
}
$("#touzi-div table").animate({marginTop:mtop+'px'},1000);
},5000);
}
})();
</script>
<body>
<div class="broad-div">
<span class="title-span">资金表格</span><hr>
<div id="touzi-div">
<table style="margin-top:0px;">
<tbody>
<tr>
<td width="180px">12:33</td>
<td width="100px">穆**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">12:34</td>
<td width="100px">果**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">12:47</td>
<td width="100px">马**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">12:47</td>
<td width="100px">白**</td>
<td>￥10000.00</td>
</tr>
<tr>
<td width="180px">12:52</td>
<td width="100px">龙**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:01</td>
<td width="100px">曾**</td>
<td>￥25000.00</td>
</tr>
<tr>
<td width="180px">13:07</td>
<td width="100px">王**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:08</td>
<td width="100px">谭**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:11</td>
<td width="100px">小**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:29</td>
<td width="100px">薛**</td>
<td>￥10000.00</td>
</tr>
<tr>
<td width="180px">13:30</td>
<td width="100px">杨**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:31</td>
<td width="100px">刘**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:48</td>
<td width="100px">陈**</td>
<td>￥10000.00</td>
</tr>
<tr>
<td width="180px">13:48</td>
<td width="100px">朱**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:51</td>
<td width="100px">李**</td>
<td>￥50000.00</td>
</tr>
<tr>
<td width="180px">13:54</td>
<td width="100px">黄**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:56</td>
<td width="100px">ygm**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">13:58</td>
<td width="100px">小**</td>
<td>￥5000.00</td>
</tr>
<tr>
<td width="180px">14:00</td>
<td width="100px">小**</td>
<td>￥10000.00</td>
</tr>
<tr>
<td width="180px">14:07</td>
<td width="100px">钟**</td>
<td>￥10000.00</td>
</tr>
</tbody>
</table>
</div>
</body>
css:
#touzi-div{
margin-top:0px;
padding-top:0px;
padding-bottom:7px;
height: 182px;
overflow: hidden;
}
#touzi-div td{
padding:0;
padding-top:0px;
height:36px;
}
#touzi-div table{
margin-left:20px;
}
扫一扫
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
