gpt4 book ai didi

jquery - 表格行不会自动滚动。脚本 1 滚动,脚本 2 不滚动。为什么?

转载 作者:行者123 更新时间:2023-12-03 22:33:29 24 4
gpt4 key购买 nike

我删除了我的第一个问题,并重新编写了更多细节和附加 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com