Table动态添加数据实现tr滚动

最新推荐文章于 2025-03-13 10:13:35 发布

一枚程序猴

最新推荐文章于 2025-03-13 10:13:35 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/ww93920/article/details/78291550

版权

这是一个使用HTML、CSS和JavaScript实现的表格数据滚动效果。通过动态添加和删除表格行，模拟表格内容的滚动。CSS样式用于固定表头，JavaScript代码在页面加载后创建520行数据，并设置定时器每2秒滚动一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>滚动表格实例</title>

<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>
var str = "";
window.onload = function() {
var Table = document.getElementById("test");
for (var i = 0; i < 520; i++) {
NewRow = Table.insertRow(); //添加行
NewCell1 = NewRow.insertCell(); //添加列
NewCell2 = NewRow.insertCell();
NewCell3 = NewRow.insertCell();
NewCell1.innerHTML = i;
NewCell2.innerHTML = "姓名" + i;
NewCell3.innerHTML = "年龄" + i;
}
}
</script>
<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 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()", 500); //每隔2秒执行一次change函数，相当于table在向上滚动一样
</SCRIPT>
</head>

<body>
<H1 style="font-color:blur;">Table动态添加内容-实现表格滚动</H1>
<table class="table" align="center">
<thead class="fixedThead" align="center">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="test" class="scrollTbody" align="center" name="123">
</tbody>
</table>
</body>

</html>