表格行不會自動滾動。腳本1滾動，腳本2不滾動。爲什麼？

Question

我刪除了我的第一個問題，並有更多的細節和另外的jsfiddle domos rewitten。

我有一個運行查詢並返回數據，然後填充表的腳本。 表中的行自動滾動循環。所有這些工作正常，並通過使用下面的代碼完成。然而，我需要做的是從JSON調用中顯示相同的數據，以啓用自動屏幕更新，而無需刷新整個頁面。我有這個在SCRIPT 2工作，但我不能讓工作是自動滾動這確實在SCRIPT 1工作。

SCRIPT 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這並不WOR 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，因爲它在腳本1.

https://jsfiddle.net/Blackbox/dsm3dg55/30/

同樣，許多在此先感謝您的時間與滾動工作。

Answer 1

你不使用該表在任何您發佈的片段。而你的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模板或這樣來構建清潔但這應該工作。