好的，下面是使用jQuery实现的代码：
```html
<!DOCTYPE html>
<html>
<head>
<
title>
JSON
Table Scroll</
title>
<script src="https://code.jquery.com/jquery-3.6.0.min.
js"></script>
<style type="text/css">
#
table-container {
height: 200px;
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="
table-container">
<
table id="
json-
table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</
table>
</div>
<script type="text/
javascript">
// 定义一个
json 对象
var data = [
{"name": "张三", "age": 18, "sex": "男"},
{"name": "李四", "age": 20, "sex": "女"},
{"name": "王五", "age": 22, "sex": "男"},
{"name": "赵六", "age": 24, "sex": "女"},
{"name": "钱七", "age": 26, "sex": "男"},
{"name": "孙八", "age": 28, "sex": "女"},
{"name": "周九", "age": 30, "sex": "男"},
{"name": "吴十", "age": 32, "sex": "女"}
];
// 生成表格
内容
function generate
TableContent(data) {
var content = '';
for (var i = 0; i < data.length; i++) {
content += '<tr>';
content += '<
td>' + data[i].name + '</
td>';
content += '<
td>' + data[i].age + '</
td>';
content += '<
td>' + data[i].sex + '</
td>';
content += '</tr>';
}
return content;
}
// 初始化表格
function init
Table() {
$('#
json-
table tbody').html(generate
TableContent(data));
}
// 定时更新表格
内容
function update
Table() {
$.ajax({
url: 'data.
json',
dataType: '
json',
success: function(result) {
data = result;
$('#
json-
table tbody').html(generate
TableContent(data));
}
});
}
$(document).ready(function() {
init
Table();
setInterval(function() {
update
Table();
}, 5000); // 每5秒更新一次表格
内容
});
</script>
</body>
</html>
```
解释一下代码：
1. 首先引入了jQuery库，并定义了一些CSS样式，其
中`#
table-container`设置了固定高度和滚动条，以实现表格
自动滚动显示。
2. 在HTML
中定义了一个空表格，并给每一列设置了表头。
3. 在
JavaScript代码
中定义了一个
JSON对象`data`，用来存储表格的
内容。
4. `generate
TableContent()`函数用于根据`data`生成表格的
内容。
5. `init
Table()`函数用于初始化表格，即将`data`
中的
内容生成到HTML
中。
6. `update
Table()`函数用于更新表格
内容，通过Ajax请求获取服务器端的
JSON数据，并将其
赋值给`data`，然后重新生成表格
内容。
7. 在`$(document).ready()`函数
中，调用`init
Table()`函数初始化表格，并使用`setInterval()`函数定时调用`update
Table()`函数更新表格
内容，以实现表格
自动滚动显示和
内容自动更新。
注意：上面的代码
中使用了`$.ajax()`函数发起了一个Ajax请求，并且假设服务器端返回的
JSON数据格式与`data`相同。你需要把这个URL改成你自己的URL，或者使用其他的Ajax函数实现数据的获取。
3767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
