Question

在每次ajax调用之后都不会清除表数据。新数据将附加在先前数据下方

$（'＃show_data'）。remove（）; 我已经尝试过了，但是没有用

查看

<table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="show_data">

                        </tbody>
                    </table>

脚本

<script>
    $(document).ready(function () {

        //Date picker
        $('#datepicker').datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
        });

        $("#datepicker").attr("autocomplete", "off");


    $(document).on('submit','#myform',function(){
        event.preventDefault();
        var date = $('#datepicker').val();
        console.log(date);
        $('#show_data').remove();
        $.ajax({
            type:"POST",
            url:"<?php echo base_url().'admin/Dashboard/get_blog'; ?>",
            data:{date:date},
            dataType: "json",
            success:function(data) {
                console.log(data[0].blog_id);
                let i;

                for(i=0;i<data.length;i++){

                    $('#show_data').append('<tr><td>' + data[i].article_name + '</td>' +
                        '<td>' + data[i].description + '</td>' +
                        '<td>' + data[i].date + '</td>' +
                        '<td>' + data[i].time + '</td>' +
                        '</tr>');
                }
            },
            error: function() {
                alert("oops...");
            },

        });
    });
 });

</script>

当前输出

输入-> 2019-05-25->提交

输出->数据1 数据2

输入-> 2019-05-24->提交

输出->数据1 数据2 数据3

预期产量

输入-> 2019-05-25->提交

输出->数据1 数据2

输入-> 2019-05-24->提交

输出->数据3

Answer 1

这是因为您将响应附加到以前的数据中。尝试这种方式

$.ajax({
    type:"POST",
    url:"<?php echo base_url().'admin/Dashboard/get_blog'; ?>",
    data:{date:date},
    dataType: "json",
    success:function(data) {
        console.log(data[0].blog_id);
        let i;

        let html= '';

        for(i=0;i<data.length;i++){

            html += '<tr><td>' + data[i].article_name + '</td>' +
                '<td>' + data[i].description + '</td>' +
                '<td>' + data[i].date + '</td>' +
                '<td>' + data[i].time + '</td>' +
                '</tr>');
        }

        $('#show_data').html(html);
    },
    error: function() {
        alert("oops...");
    },

});

Answer 2

您可以尝试更改代码

$('#show_data').remove();

到

$('#show_data').empty();

empty()函数将清除元素的内容。文档在这里https://api.jquery.com/empty/

如何在每次ajax调用之前清除表的数据

2 个答案: