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

您正在使用追加但不附加元素。您可以使用'.html（）'从var表中添加HTML，并将HTML添加到当前HTML中。

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

Answer 2

在重新加载新内容之前，您必须清除<tbody>内容。

但是，在这种情况下，您应该在<thead>元素中添加和管理表格内容，以保留上面的$('#tbody_id').html (""); // This cleans the previous content.。

所以，在你的json函数中，你可以做一些像：

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

然后在您执行此操作时添加新内容：

{{1}}

Answer 3

尝试：

添加tbody id

 <tbody id='tbodyid'>

在追加

之前清楚

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

在您的代码中

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

重新加载表Ajax jquery

3 个答案: