重新加载表Ajax jQuery

Question

我正在开发一个表，用ajax / jquery重新加载该表，但是表不为空，将下一个内容追加到表中。

<table class="table" id="pujas">
    <thead>
        <tr>
            <th>#</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

jQuery的

<script>
 $(document).ready(
            function() {
                setInterval(function() {                  
                $.ajax({
                url:'../ajaxpujas',
                 dataType:'json',
                type:'get',
                cache:true,
                success:json,

               });

               function json(data){
                   $(data).each(function(index,value)  {
                        console.log(value);
                        var table = '<tr><td>' + value.id + '</td><td>' + value.id_user + '</td><td>' + value.importe + '</td></tr>';
                        $('#pujas').append( table );
                        });
                        }
                }, 1000);
            });
</script>

有什么想法吗？ 我如何正确地执行刷新表？

Answer 1

您必须先清理<table>内容，然后才能重新加载新内容。

但是，在这种情况下，应从<tbody>元素内添加和管理表内容，以保留上方的<thead> 。

因此，在您的json函数中，您可以执行以下操作：

$('#tbody_id').html (""); // This cleans the previous content.

然后添加您正在执行的新内容：

$('#tbody_id').append ('Your html content');

Answer 2

您正在使用附加但未附加元素。 您可以使用'.html（）'将var表中的HTML添加到当前HTML中。

另一种方法是实际创建元素，然后使用.append

Answer 3

尝试：

添加肢体ID

 <tbody id='tbodyid'>

并在追加之前清除

$("#tbodyid").empty();

在你的代码中

  function json(data){
                   $("#tbodyid").empty();
                   $(data).each(function(index,value)  {
                   ...