JQuery清除HTML表并插入新行

时间:2015-07-22 09:16:13

标签: jquery html replace socket.io html-table

我一直在寻找,但找不到有效的解决方案。

我有一个简单的HTML表格:

<table id="myTable">
        <thead>
            <tr>
                <th>UserID</th>
                <th>Current Submissions</th>
            </tr>
        <tbody>
            <tr>
            </tr>
        </tbody>
        <thead>
    </table>

使用socket.io我收到JSON数据后,我会在清除后附加到表中。下面的代码只删除表并且不插入新数据?

<script>
    var socket = io();
    socket.on('totalsubmissions', function(msg) {
        $('#myTable').find('tbody').remove();
        // loop over each recevied in the object
        $.each(msg, function(k, v) {
            //display the key and value pair
            var myRow = "<tr><td>" + k + "</td><td>" + v + "</td></tr>";
            $('#myTable').find('tbody').append(myRow);
        });

    });
</script>

我是否错误地移除了桌子?

1 个答案:

答案 0 :(得分:4)

此行正在移除tbody

$('#myTable').find('tbody').remove();

所以,当你到达这一行时:

$('#myTable').find('tbody').append(myRow);

找不到tbody

变化:

$('#myTable').find('tbody').remove();

要:

$('#myTable').find('tbody').empty();