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