将 json 数据附加到表体不起作用答案

【问题标题】：Appending json data to a table body doesn't work将 json 数据附加到表体不起作用
【发布时间】：2015-06-30 17:25:09
【问题描述】：

我正在尝试将 json 数据附加到表体。我可以将它附加到一个 div 但是当我尝试将它附加到一个表时没有任何反应。几个小时以来，我一直在搜索这个错误。而且我看到了许多使用相同方法的示例..

这是我的 javascript 代码：

   <script type="text/javascript">

    function getData2(id){
        $.ajax({
            type: "POST",
            url: "get.php",
            data: {id:id},
            dataType: "json",
            success:function(response)
            {
                var trHTML = '';
                $.each(response, function (i, item) {
                    trHTML +=   '<tr>' +
                                    '<td>' + item.data1 + '</td>' +
                                    '<td>' + item.data2 + '</td>' +
                                    '<td>' + item.data3 + '</td>' +
                                    '<td>' + item.data4 + '</td>' +
                                    '<td>' + item.data5 + '</td>' +
                                '</tr>';
                });

                //alert(trHTML); This Works.. I can see data in an alert
                //$('#aDiv').append(trHTML); This Works.. Appends to a div;

                //$('#tablebody').append(trHTML); Doesn't work..
                //$('#records_table tbody').append(trHTML); Doesn't work..
                $('#records_table').append(trHTML); Doesn't work..

            }
        });
    }

我的桌子的代码是：

<table id="records_table">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
        </tr>   
    </thead>
    <tbody id="tablebody">
       //Json data will appear here...
    </tbody>
</table>

现在，我只想将我的 json 数据附加到表体中。但是我的代码结果是

1 - 使用警报命令我可以看到所有数据 2 - 如果我将它附加到一个 div 我可以看到所有数据 3 - 我不能将它附加到表格或表格主体...

我不明白我的错误在哪里..

在此先感谢所有好心人和他们的回答...

【问题讨论】：

您在控制台中看到任何错误吗？
检查您没有重复的 ID
谢谢大家。没有错误，没有任何重复的 ID。我已经尝试过 $('#records_table tbody').append(trHTML)。什么都没有改变..
@NewGeneration 你是怎么调试的？？？您确定没有添加内容，而不仅仅是隐藏内容吗？什么返回：console.log($('[id=records_table]').length); 成功回调？！无论如何，您必须提供有问题的样本复制问题

标签： javascript jquery html mysql json

【解决方案1】：

我在论坛上遇到过类似的问题，检查了OP的代码，导致<tr>为空。

$.each(response, function (i, item) {

       trHTML +=   '<tr><td>' + item.data1 + '</td><td>' + item.data2 + '</td><td>' + item.data3 + '</td><td>' + item.data4 + '</td><td>' + item.data5 + '</td></tr>';
                });

并保持其余代码相同。

【讨论】：

@New Generation 有帮助吗？
@NewGeneration 你能提琴吗？
jsfiddle.net/ngjavacs/w5g7ahxk 我从未使用过 JSfiddle。我希望我可以.. :)
@NewGeneration 它似乎在我的电脑上工作，检查这个 FIDDLE 链接：jsfiddle.net/1ypx3jm7/11
尝试清空缓存并重新加载？ @新世代

【解决方案2】：

这应该可行：

var response = [{
    "data1": "1",
    "data2": "2",
    "data3": "3",
    "data4": "4",
    "data5": "5"
}];
var trHTML = '';
$.each(response, function (i, item) {
    trHTML += '<tr>' +
        '<td>' + item.data1 + '</td>' +
        '<td>' + item.data2 + '</td>' +
        '<td>' + item.data3 + '</td>' +
        '<td>' + item.data4 + '</td>' +
        '<td>' + item.data5 + '</td>' +
        '</tr>';
});

$('#records_table > tbody').append(trHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="records_table">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
            <th>Head 1</th>
        </tr>
    </thead>
    <tbody id="tablebody"></tbody>
</table>

希望对您有所帮助。

【讨论】：

但是你看到我的代码工作了。我模拟了ajax调用返回的数据。
响应数组中的一行显示为 (data1: '1')。但在我的 json 编码中，它似乎是 {"data1":"1","data2":"1"}.. 这是一个问题.. 我使用 json_encode($variable) 创建 json..
jsfiddle.net/ngjavacs/w5g7ahxk 我刚刚创建了一个 JSFiddle。你能检查一下吗？
@NewGeneration：你必须选择JQuery库（框架和扩展），并在脚本中调用函数getData2（）。它有效。
非常感谢。在你的帮助下我得到了它。

【解决方案3】：

 $('#myTable > tbody:last').append(data);

这个脚本和我一起工作

【讨论】：

【解决方案4】：

试试这个： $('#records_table').children('tbody').append(trHTML);

【讨论】：