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

目录

效果图

应用场景

html

css

js

---

效果图

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

应用场景

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

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);