使用table自带的deleteRow,insertRow方法实现表格内容滚动

最新推荐文章于 2023-04-11 15:04:44 发布

帝尊菜鸟

最新推荐文章于 2023-04-11 15:04:44 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： deleteRow insertRow 表格滚动表格内容滚动

本文链接：https://blog.youkuaiyun.com/dizuncainiao/article/details/81335311

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现无限滚动效果的表格展示方案。该方案适用于表格高度固定且行数不确定的情况，通过定时将最后一行滚动到最上方，使用户能够连续查看表格内容。

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

效果图

首先先放一张简单的效果图，如下：

应用场景

适用于表格高度固定，行数不确定，不允许出现滚动条，但必须让用户能浏览到全部表格内容。

html

<div class="table-box">
	<table border="" cellspacing="" cellpadding="">
		<thead>
			<tr>
				<th>title-1</th>
				<th>title-1</th>
				<th>title-1</th>
				<th>title-1</th>
				<th>title-1</th>
			</tr>
		</thead>
		<tbody id="table">
			<tr>
				<td>data-11</td>
				<td>data-12</td>
				<td>data-13</td>
				<td>data-14</td>
				<td>data-15</td>
			</tr>
			<tr>
				<td>data-21</td>
				<td>data-22</td>
				<td>data-23</td>
				<td>data-24</td>
				<td>data-25</td>
			</tr>
			<tr>
				<td>data-31</td>
				<td>data-32</td>
				<td>data-33</td>
				<td>data-34</td>
				<td>data-35</td>
			</tr>
			<tr>
				<td>data-41</td>
				<td>data-42</td>
				<td>data-43</td>
				<td>data-44</td>
				<td>data-45</td>
			</tr>
			<tr>
				<td>data-51</td>
				<td>data-52</td>
				<td>data-53</td>
				<td>data-54</td>
				<td>data-55</td>
			</tr>
		</tbody>
	</table>
</div>

css

.table-box {
	width: 500px;
	height: 220px;
	margin: 100px auto;
	overflow: hidden;
}

.table-box>table {
	width: 100%;
}

js

let table = document.querySelector('#table');
let len = table.rows.length;

function scrollTable() {
	let lastRow = table.rows[len - 1]; //获取最后一行

	table.deleteRow(len - 1); //在新增一行前，删除最后一行

	let newRow = table.insertRow(0); //在table首行新增一行

	for(let i = 0; i < lastRow.cells.length; i++) { //将最后一行单元格内容遍历到新的一行中
		newRow.insertCell(i).innerHTML = lastRow.cells[i].innerHTML;
	}
}

setInterval(scrollTable, 1000);