Javascript DIV未显示所有检索到的JSON数据

为什么此代码不显示所有数据。它切断了显示器

<script type="text/javascript">
    $(document).ready(function() {
        var url = "http://xxxxxxx/integration/json_news.php";
        $.getJSON(url, function(result) {
            console.log(result);
            $.each(result, function(i, field) {
                var source = field.source;
                var summary = field.summary;
                var heading = field.heading;
                var news_date = field.news_date;
                $("#newsview").append("<tr class='even gradeA' width = '30px'><td><li><b>"+heading+" - "+news_date+"</b> <br />"+summary+"</i></li><br /></td></tr>");
            });
        });
    });
    </script>

$（文档）.ready（函数（）{
变量url=”http://xxxxxxx/integration/json_news.php";
$.getJSON（url、函数（结果）{
控制台日志（结果）；
$.each（结果、函数（i、字段）{
var source=field.source；
var summary=field.summary；
变量标题=字段标题；
var news\u date=field.news\u date；
$（“#新闻视图”）。追加（“
”+标题+”-“+新闻日期+”
“+摘要+”

）；
});
});
});

这就是我称之为ajax代码的DIV

<!--NEWS PAGE -->
                <div data-page="news" class="page cached">
                    <div class="page-content">
                        <div id="newsview"></div>

                    </div>
                </div>

我正在使用

IntelXDK

并构建一个

Framework7

混合应用程序

---

不知何故，当我在手机上进行测试时，我就能明白为什么会这样。是否

Framework7

无法显示超出特定大小的数据？或者我的代码有问题。

不幸的是，你的js生成的HTML无效

您正在将表行

tr

追加到

div

。它们还包含

li

tr

应该是

table

的子节点，

li

应该是

ul

或

ol

的子节点

另外，

width='30px'

应该没有空格：

width='30px'

。 顺便说一句，你真的希望你的内容有这么窄的容器吗

并且您有关闭

标记，该标记以前没有打开

我建议如下：

$("#newsview").append(
   '<div class="even gradeA"><b>'+
    heading+ ' - ' +news_date+ 
   '</b><br><i>' +summary+ '</i></div>'
 );

$（“#新闻视图”）.append(
''+
标题+'-'+新闻和日期+
“
”+摘要+”
);

然后使用CSS来设置样式