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

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({&nbsp; &nbsp; type:"POST",&nbsp; &nbsp; url:"<?php echo base_url().'admin/Dashboard/get_blog'; ?>",&nbsp; &nbsp; data:{date:date},&nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; success:function(data) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(data[0].blog_id);&nbsp; &nbsp; &nbsp; &nbsp; let i;&nbsp; &nbsp; &nbsp; &nbsp; let html= '';&nbsp; &nbsp; &nbsp; &nbsp; for(i=0;i<data.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '<tr><td>' + data[i].article_name + '</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td>' + data[i].description + '</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td>' + data[i].date + '</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<td>' + data[i].time + '</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</tr>');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $('#show_data').html(html);&nbsp; &nbsp; },&nbsp; &nbsp; error: function() {&nbsp; &nbsp; &nbsp; &nbsp; alert("oops...");&nbsp; &nbsp; },});