jq实现表格按行滚动

最新推荐文章于 2022-08-14 22:32:19 发布

小志哥斯拉

最新推荐文章于 2022-08-14 22:32:19 发布

阅读量1.3k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_55510188/article/details/121849854

版权

javascript

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jq实现表格按行滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格按行滚动</title>
		<style>
			.container {
				width: 80%;
				height: 120px;
				overflow: hidden;
				border: 1px solid #009688;
			}

			.table {
				width: 100%;
				text-align: center;
				border-collapse: collapse;
				border-spacing: 0;
			}

			.table thead {
				background-color: #0000FF;
			}

			.table tbody {
				position: relative;
				background-color: #009688;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead>
					<tr>
						<th>生产线</th>
						<th>日下线</th>
						<th>已合格</th>
						<th>未合格</th>
					</tr>
				</thead>
				<tbody>
					<!-- 表格内容 -->
				</tbody>
			</table>
		</div>

		<!-- jq实现表格滚动 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script>
			(function() {
				//用于清除定时器
				var tabelTimer = null;
				//刷新表格数据
				function getData() {
					// 1.添加表格内容
					var tbody = $('.table tbody');
					tbody.empty();
					for(var i=0; i<10; i++) {
						var tr = "<tr><td>" + i +
							"</td><td>" + i +
							"</td><td>" + i +
							"</td><td>" + i +
							"</td></tr>";
						tbody.append(tr);
					}
					
					//2.表格滚动
					var rowList = $('.table tbody tr');
					var top = 0;
					var index = 0;
					
					//清除上一个定时器
					if (tabelTimer) {
						clearInterval(tabelTimer);
					}
					
					//定时器执行表格滚动
					tabelTimer = setInterval(function() {
						// jq动画
						tbody.animate({
							top: -top + 'px'
						}, "slow");
						
						top += rowList[index].clientHeight;
						index += 1;
						if (index == rowList.length) {
							top = 0;
							index = 0;
						}
						
					}, 1000);
				}
				
				getData();
				
				//定时刷新数据
				setInterval(function() {
					getData();
				}, 20000)

			})();
		</script>
	</body>
</html>