js table表格自下而下不断循环

最新推荐文章于 2024-04-30 20:15:41 发布

VIP文章 loser

最新推荐文章于 2024-04-30 20:15:41 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： js html json

本文链接：https://blog.csdn.net/qq_41249892/article/details/93305523

版权

1.json 数据格式接收循环

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
<html>  
<head>  
<title>table内容连续滚动</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style type="text/css">  
* {padding: 0; margin: 0};  
td {height: 28px;}
</style>  
</head>  
<body bgcolor="#FFFFFF">  
<div id="demo3" style="padding-top: 100px;"></div>
<div id="demo1"></div>
<script type="text/javascript">  
	$(function() {
		$.ajax({
			type: "get",
			url: "employee.json",
			success: function(res) {
				//alert(JSON.stringify(res));
				var str = JSON.stringify(res);
				var data = JSON.parse(str); //转JSON对象
				var rowCount = data.rows.length; //获取行号
				var cellCount = data.columns.length; //获取列数
				total=data.total;
				var str = JSON.stringify(res);
				var data = JSON.parse(str); //转JSON对象
				var rowCount = data.rows.length; //获取行号
				var cellCount = data.columns.length; //获取列数
				
				//添加表头
				var table_H = $("<table width='600' border='1' align='center' cellpadding='0' cellspacing='0' bordercolor='4FBFF9'>"); //看不懂
				table_H.appendTo($("#demo3")); //追加到DIV
				var trHeader = $("<tr></tr>"); //看不懂
				trHeader.appendTo(table_H); //追加到table
				for(var j = 0; j < cellCount; j++) {
					var td = $("<td>" + data.columns[j].title + "</td>");
					td.appendTo(trHeader); //把信息追加到trHeader
				}
				$("#demo3").append("</table>");
						
				//添加内容
				var table_B = $("<table width='600' border='0' align='center' cellpadding='0' cellspacing='0' bordercolor='4FBFF9'>"); //看不懂
				table_B.appendTo($("#demo1"));
				var tbody = $("<tbody id='test'>");
				tbody.appendTo(table_B);
				for(var i = 0; i < rowCount; i++) {
					var tr = $("<tr></tr>");
					tr.appendTo(tbody);
					for(var j = 0; j < cellCount; j++) {
						var field = data.columns[j].field;
						var val = "";
						if(data.rows[i][field] != null) {
							val = data.rows[i][field];
						}
						var td = $("<td>" + val + "</td>");
						td.appendTo(tr);
					}
				}
				var trbody = $("</tbody>");
				trbody.appendTo(table_B);
				$("#demo1").append("</table>");
			}
		});
	})
	//先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
   function change(table){
      var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
      for(j=0;j<table.rows[0].cells.length;j++){//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
         var cell = row.insertCell(j);//给新插入的行中添加单元格
         cell.height = "24px";//一个单元格的高度，跟css样式中的line-height高度一样
         cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
      }
      table.deleteRow(0);//删除table的第一行
   };
   function tableInterval(){
      var table = document.getElementById("test");//获得表格
      change(table);//执行表格change函数，删除第一行，最后增加一行，类似行滚动
   };
   setInterval("tableInterval()",800);//每隔2秒执行一次change函数，相当于table在向上滚动一样
</script>  
</body>  
</html>

2.html静态页面循环

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<HEAD>
<TITLE>滚动表格</TITLE>
<!--css样式是锁定表头不动的-->
<style type="text/css"> 
    .table{
         width: 100%;
         left:30%;
         border-collapse:collapse; 
         border-spacing:0;
     }
     .fixedThead{
         display: block;
         width: 100%;
     }
     .scrollTbody{
         display: block;
         height: 316px;
         overflow: hidden;
         width: 100%;
     }
     .table td {
         width: 300px;
         border-bottom: #333 1px dashed;
         padding: 5px;
         background-color:#ddd;
     }
     .table th {
         width: 300px;
         border-bottom: #333 1px dashed;
         border-top: #333 1px dashed;
         padding: 5px;
         line-height:24px;
         background-color:#cfc;
     }
     .table tr{
         border-bottom: #333 1px dashed;
         line-height:24px;
         padding: 5px;
     }
     thead.fixedThead tr th:last-child {
         color:#FF0000;
     }
</style>
<SCRIPT LANGUAGE="JavaScript"> 
   //先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
   function change(table){
      var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
      for(j=0;j<table.rows[0].cells.length;j++){//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
         var cel

最低0.47元/天解锁文章

loser

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js table表格自下而下不断循环

1.json 数据格式接收循环<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>table内容连续滚动</title> <meta http-equiv="Content-Type" conten...
复制链接

扫一扫