JS滚动Table表格

最新推荐文章于 2023-04-11 11:11:25 发布

bakeloar

最新推荐文章于 2023-04-11 11:11:25 发布

阅读量4k

点赞数 1

分类专栏： Js Html 文章标签： table class border function scroll div

本文链接：https://blog.csdn.net/bakeloar/article/details/6587504

版权

Js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Html

6 篇文章 0 订阅

订阅专栏

滚动Table表格，在很多系统上都会用到，特别是内容需实时显示，但页面篇幅又太小的地方，比如金融网站上的行情显示。

下面是自己仿照网站上做的一个小页面

<html><head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<style>
.yellow{
	color:#FF0;
}
</style>
</head>
<body style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
 <table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="1" width="381">
  <tbody><tr>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="47">合约</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="47">开盘价</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="47">最高价</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="48">最低价</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="48">最新价</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="48">涨跌</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="48">成交量</td>
      <td class="yellow" align="center" bgcolor="#000000" height="21" width="48">持仓量</td>
    </tr>
  </tbody></table>
<table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0" width="381">
    <tbody><tr>
      <td width="381">
<div id="demohq" width="381" style="overflow:hidden;height:85;">
	<div id="demohq1" align="center">
<table border="0" cellpadding="0" cellspacing="1" width="381">
		<tbody><tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1107</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">0</td>
		</tr>
		<tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1109</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">54098</td>
		</tr>
		<tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1111</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">0</td>
		</tr>
</tbody></table></div>
	<div id="demohq2" align="center">
<table border="0" cellpadding="0" cellspacing="1" width="381">
		<tbody><tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1107</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">0</td>
		</tr>
		<tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1109</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">54098</td>
		</tr>
		<tr bgcolor="#ffffff">
			<td class="td1" align="center" height="28" width="47">IF1111</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="47">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td class="td1" align="center" height="28" width="48">0</td>
			<td align="center" height="28" width="48">0</td>
		</tr>
</tbody></table></div>
</div>
      </td>
    </tr>
  </tbody></table>
<script>
var speedhq=60;
function Marqueehq(){
	if(demohq.scrollTop==demohq1.offsetHeight){
		demohq.scrollTop=0;
	}else{
		demohq.scrollTop++;
	}
}
var MyMarhq=setInterval(Marqueehq,speedhq)
demohq.οnmοuseοver=function() {clearInterval(MyMarhq)}
demohq.οnmοuseοut=function() {MyMarhq=setInterval(Marqueehq,speedhq)}
</script></body></html>

几点说明

1、需要两个一样的table表格，主要是高度一样

当表格滚动时，部分隐常时，另外一个表格数据替换之。这就要求两个表格高度之和应该大于显示区域之和。

2、定时函数不断地让表格向上滚动

var speedhq = 60; //滚动的速度