JQuery清除HTML表格并插入新行

Posted 2023-04-18

【中文标题】JQuery清除HTML表格并插入新行

【英文标题】：JQuery clear HTML table and insert new rows

【发布时间】：2015-10-12 01:51:41

【问题描述】：

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

我有一个简单的 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】：

这一行正在删除tbody。

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

所以当你到达这一行时：

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

找不到tbody。

变化：

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

收件人：

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

【讨论】：

谢谢，我以为是这样的。

如果我想删除所有 td 和 rw 并保留 th ？

@jorgesaraiva 如果你把th 放在<thead></thead> 里面而不是<tbody> 里面，那么这仍然对你有用。