Question

我有一个jquery数据表，其中每行上都有一个扩展按钮。当我单击展开按钮时，它将展开该行，并显示另一个嵌套表以及其他信息。

我遇到的问题是，每当我迅速双击扩展按钮时，嵌套表就会被填充冗余记录。我的问题是如何刷新表中的先前数据？

我将部分示例代码包含在这个问题中，如下所示：

const givenObject = {
  id: 4,
  name: ''
};

myArray.forEach(obj => {
  if (obj.id !== givenObject.id || obj.name !== givenObject.name) {
    myArray.push(givenObject);
    myArray.push(givenObject);
    myArray.push(givenObject);
  }
})

如何清除此问题

  $('.js-cars-list').on('click', '.js-expand-btn', function () {
            var value = $(this).attr('id');
            $('.js-expand-btn').text('+');

            if ($(this).parents('tr').hasClass('parent')) {
                $(this).text('-');

                GetCarDetails(value);
            }
            else {
                $(this).text('+');
            }

        });


function GetCarDetails(carId) {

            $.ajax({
                url: '@Url.Action("GetCarDetails", "Cars")',
                type: 'POST',
                data: { carId: carId },
                dataType: 'json',
                success: function (data) {

                                    $.each(data.data, function (key, value) {

                                        $.each(value, function (k, v) {
                                            $(".mdl-data-table .mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name + "</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");
                                        });

                                    });
                                },
                error: function (data) {
                    console.log('Error occured');
                }
            });

再次单击

并使其充满新数据？

请帮助。

Answer 1

您可以先清除表，然后再向其中添加新数据。

类似这样

function GetCarDetails(carId) {

    // clear table data 
    $(".mdl-data-table").empty();

    $.ajax({
        url: '@Url.Action("GetCarDetails", "Cars")',
        type: 'POST',
        data: { carId: carId },
        dataType: 'json',
        success: function (data) {

            $.each(data.data, function (key, value) {

                $.each(value, function (k, v) {
                    $(".mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name +
            "</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");
                });

            });
                        },
        error: function (data) {
            console.log('Error occured');
        }
    });

}

还有一件事

$(".mdl-data-table .mdl-data-table")

我在上面使用的两种分类中都看不到任何区别，因此您可以将其更改为

$(".mdl-data-table")

Answer 2

您可以使用empty（）函数清除表

$(".mdl-data-table").empty();

用jQuery中的数据清除动态生成的表

2 个答案: