js实现表格内容自动定时滚动,表格内容根据json生产并可定时更新。给出完成代码
时间: 2024-03-27 14:36:07 浏览: 116
js 实现 滚动的表格
4星 · 用户满意度95%
以下是一个基于JavaScript和jQuery实现表格内容自动定时滚动的示例代码,该表格内容可以根据JSON数据生成和更新:
HTML代码:
```html
<div id="table-wrapper">
<table id="my-table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
```
JavaScript代码:
```javascript
// JSON数据示例
var jsonData = [
{ col1: "内容1", col2: "内容2", col3: "内容3" },
{ col1: "内容4", col2: "内容5", col3: "内容6" },
{ col1: "内容7", col2: "内容8", col3: "内容9" }
];
// 定义表格滚动间隔时间(单位:毫秒)
var scrollInterval = 3000;
// 动态生成表格内容
function generateTableContent(data) {
var content = "";
for (var i = 0; i < data.length; i++) {
content += "<tr>";
content += "<td>" + data[i].col1 + "</td>";
content += "<td>" + data[i].col2 + "</td>";
content += "<td>" + data[i].col3 + "</td>";
content += "</tr>";
}
return content;
}
// 更新表格内容
function updateTableContent() {
// 从服务器获取最新的JSON数据
var newData = [
{ col1: "新内容1", col2: "新内容2", col3: "新内容3" },
{ col1: "新内容4", col2: "新内容5", col3: "新内容6" },
{ col1: "新内容7", col2: "新内容8", col3: "新内容9" }
];
// 清空表格内容并重新生成
$("#my-table tbody").empty().append(generateTableContent(newData));
}
// 启动表格滚动
function startTableScroll() {
// 获取表格的高度和滚动高度
var tableHeight = $("#my-table").outerHeight();
var scrollHeight = $("#my-table tbody").outerHeight();
// 如果表格内容高度小于表格高度,则不需要滚动
if (scrollHeight <= tableHeight) {
return;
}
// 复制表格内容并添加到表格末尾
$("#my-table tbody").append($("#my-table tbody").html());
// 定时滚动表格内容
setInterval(function() {
var top = $("#my-table tbody").scrollTop();
var newTop = top + tableHeight;
if (newTop >= scrollHeight) {
newTop = 0;
}
$("#my-table tbody").animate({ scrollTop: newTop }, "slow");
}, scrollInterval);
}
// 页面加载完成后执行
$(document).ready(function() {
// 生成表格内容
$("#my-table tbody").append(generateTableContent(jsonData));
// 启动表格滚动
startTableScroll();
// 定时更新表格内容
setInterval(function() {
updateTableContent();
}, scrollInterval);
});
```
在上面的代码中,我们首先定义了一个JSON数据示例,然后实现了一个动态生成表格内容的函数`generateTableContent`。接着,我们定义了一个表格滚动间隔时间`scrollInterval`,以及一个启动表格滚动的函数`startTableScroll`。在`startTableScroll`函数中,我们首先获取表格的高度和滚动高度,如果表格内容高度小于表格高度,则不需要滚动。然后,我们将表格内容复制并添加到表格末尾,最后定时滚动表格内容。
在页面加载完成后,我们首先生成表格内容,然后启动表格滚动,并定时更新表格内容。这样,就实现了一个表格内容自动定时滚动的效果,而且表格内容可以根据JSON数据动态生成和更新。
阅读全文
相关推荐
晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序。 要求是: 1,对于空内容,应该写为” ”,否则在ie会显示的很变态(ie当作该单元格不存在)。 2,当输出数据条数不等于表格的“长X宽”时,用” ”自动填补最后一行空余的地方。 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(MakeTable1),今天用js实现了下,不过郁闷的是感觉效率上都一样,这样还是用第一个比较好(容易理解,代码少)。 代码如下:
Untitled 1
.sty