Question

上面的代码使用JSON输出生成HTML表格。

但是，我的问题是，在此JQuery运行后，其他页面内容未显示。

<script>
    $(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;

    var data2   =   <?php echo $data; ?>;
    $.each(data2[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data2, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
     console.log(html);
});
</script>

当页面加载时，内容应该消失，它应该只显示特定的表。

Answer 1

更改此

$('body').html(html);

与

$('body').append(html);

Answer 2

可能原因是

Product Version: NetBeans IDE 8.1 (Build 201510222201)
Updates: NetBeans IDE is updated to version NetBeans 8.1 Patch 1
Java: 1.8.0_60; Java HotSpot(TM) 64-Bit Server VM 25.60-b23
Runtime: Java(TM) SE Runtime Environment 1.8.0_60-b27
System: Windows 10 version 10.0 running on amd64; Cp1252; nl_NL (nb)

因为html（）方法会改变body元素的内容。你应该使用

$('body').html(html);

在body元素的末尾插入内容。

Answer 3

你必须.ready函数才能运行点击事件....因为当文档准备就绪时，只有你可以处理点击事件

$(document).ready(function(){
 $("#electric").click(function(e){
 $("#chart_div").load("new_content.html");
 });
 });

Answer 4

你错过了：html += '</tr>'; 请查看完整代码

<script>
    $(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;

    var data2   =   <?php echo $data; ?>;
    $.each(data2[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data2, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '</tr>';
     });
     html += '</table>';
     $('body').html(html);
     console.log(html);
});
</script>

JQuery加载后未显示网页内容

4 个答案: