我删除了我的第一个问题,并重新编写了更多细节和附加 jSfiddle domos。
我有一个脚本,它运行查询并返回数据,然后填充表。 表中的行自动循环滚动。所有这些工作正常,并通过使用以下代码完成。然而,我需要做的是显示来自 JSON 调用的相同数据,从而启用自动屏幕更新,而无需刷新整个页面。我有这个在SCRIPT 2中工作,但我无法开始工作是在SCRIPT中工作的自动滚动1.
脚本 1:这个可行
<table id='table_scroll'>
<section id="section">
do {
<div class='container'>
<div class='clientname-text'><?php echo $row_conf['ClientName'];?></div>
<div class='roomname-text'><?php echo $row_conf['RoomName'];?></div>
<div class='time-text'><?php echo date("H:i", strtotime($row_conf['RoomFromTime'])) . " - " . date("H:i", strtotime($row_conf['RoomToTime']));?></div>
</div>
} while ($row_conf = mysqli_fetch_assoc($conf));
</section>
</table>
$.fn.infiniteScrollUp=function(){
var self=this,conf=self.children()
setInterval(function(){
conf.slice(10).hide();
conf.filter(':hidden').eq(0).slideDown()
conf.eq(0).slideUp(6000, "linear",function(){
$(this).appendTo(self);
conf=self.children();
});
},100)
return this;
}
$(function(){
$('section').infiniteScrollUp()
})
https://jsfiddle.net/Blackbox/b2dv6w3w/11/
我现在想使用 JSON 调用返回的数据来动态创建表。我已经使用以下代码完成了此操作。
脚本 2 这不起作用K,有人能明白为什么吗?
<table id='table_scroll'>
<section id="section"></section>
</table>
$(document).ready(function() {
function get_data() {
$.getJSON("get_data_logos.php", function(json){
json = json[0].data;
var tr ;
$('table').html("");
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.css("border-bottom","2px solid #FFF");
tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>");
tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>");
tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>");
$('table').append(tr);
}
});
}
get_data();
setInterval(get_data,60000)
});
$.fn.infiniteScrollUp=function(){
var self=this,conf=self.children()
setInterval(function(){
conf.slice(10).hide();
conf.filter(':hidden').eq(0).slideDown()
conf.eq(0).slideUp(6000, "linear",function(){
$(this).appendTo(self);
conf=self.children();
});
},100)
return this;
}
$(function(){
$('section').infiniteScrollUp()
})
我的问题是:如何让 SCRIPT 2 像 SCRIPT 1 中那样使用滚动条。
https://jsfiddle.net/Blackbox/dsm3dg55/30/
再次非常感谢您抽出时间。
最佳答案
您没有在您发布的任何代码片段中使用该表格。并且您的 getdata()
未在任何地方定义。
我所做的只是将 JSON 对象转换为 HTML,其余代码保持不变: https://jsfiddle.net/5k9wk6vj/
$(function(){
let $section = $('section');
let clients = json[0].data;
//json to html
$.each(clients, function (key, client) {
$section.append(
"<div class='container'>" +
"<div class='clientname-text'>" + client.ClientName + "</div>" +
"<div class='roomname-text'>" + client.RoomName + "</div>" +
"<div class='time-text'>" + client.RoomFromTime + " - " + client.RoomToTime + "</div>" +
"</div>");
});
//start scrolling
$section.infiniteScrollUp();
})
很可能可以使用 HTML 模板等来构建更清晰的 HTML,但这应该可行。
关于jquery - 表格行不会自动滚动。脚本 1 滚动,脚本 2 不滚动。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45709619/