我删除了我的第一个问题,并重新更新了更多细节和添加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这不起作用,谁能明白为什么?
<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,100) return this; } $(function(){ $('section').infiniteScrollUp() })
我的问题是:如何在SCRIPT 1中使用SCRIPT 2来处理滚动.
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模板等更清晰地构建,但这应该可行.