表格行不会自动滚动。脚本 1 滚动，脚本 2 不滚动。为什么？

Question

我删除了我的第一个问题，并重新编写了更多细节并添加了 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 调用重新调整的数据来动态创建表。我已经使用以下代码完成了此操作。

SCRIPT 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/

再次，非常感谢您抽出宝贵时间。

Answer 1

您在发布的任何 sn-ps 中都没有使用该表。并且您的 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，但这应该可以。