JQ获取动态数据渲染表格数据向上滚动

最新推荐文章于 2022-10-11 18:14:17 发布

周不凢

最新推荐文章于 2022-10-11 18:14:17 发布

阅读量450

点赞数

分类专栏： JQ 文章标签： jquery html javascript css

本文链接：https://blog.csdn.net/qq_39047060/article/details/115404478

版权

JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#title {
			width: 915px;
			height: 735px;
			color: #42daed;
			font-size: 12px;
			z-index: 1;
		}
		#table{
			width: 915px;
			height: 735px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			
		}
		#table thead{
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 10;
		}
		#table thead tr{
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #003376;
		}
		#table tbody{
			width: 100%;
			height: 710px;
			overflow: hidden;
			z-index: 0;
		}
		#table tbody tr{
			width: 100%;
			min-height: 40px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		}
		#table tbody tr td{
			text-align: center;
		}
	</style>
	<body>
		<div id="title">
			<table id="table">
				<thead>
					<th>序号</th>
					<th>1</th>
					<th>2</th>
					<th>3</th>
					<th>4</th>
					<th>5</th>
				</thead>
				<tbody class="Tbody">
					<!-- <tr >
						<td></td>
					</tr> -->
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var srcHtml = '';
			var data=["内容1","内容2","内容3","内容4","内容5","内容6"];
			$.each(data, function(i, item) {
				srcHtml += '<tr><td>'+(i+1)+'</td>'+
				'<td>'+item+'</td>'+
				'<td>'+item+'</td>'+
				'<td>'+item+'</td>'+
				'<td>'+item+'</td>'+
				'<td>'+item+'</td></tr>'
			})
			$(".Tbody").html(srcHtml)
			moveTab();
		})
		function moveTab(){
			var margintop=0;//上边距的偏移量
			var stop=false;
			setInterval(function(){
				if(stop==true){
					return;
				}
				$(".Tbody").children("tr").first().animate({"margin-top":margintop--},0,function(){
					var $li=$(this);
					if(!$li.is(":animated")){//第一个tr的动画结束时
						if(-margintop>$li.height()){
							$li.css("margin-top","0").appendTo($(".Tbody"));
							margintop=0;
						}
					}
				});
			},50);  //滚动速度
			$(".Tbody").children("tr:nth-child(even)").css("background-color","#022459")
			$(".Tbody").children("tr:nth-child(odd)").css("background-color","#01234e")
			//鼠标放到快递信息(tr)上时
			$(".Tbody").hover(function(){
				$(this).css("cursor","pointer");
				stop=true;//停止动画
			},function(){
				stop=false;//开始动画
			});
		}
	</script>
</html>

注：转载请标明出处

周不凢

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
JQ获取动态数据渲染表格数据向上滚动

实现效果：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #title { width: 915px; height: 735px;
复制链接

扫一扫