如何在每次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({

    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...");

    },

});