Question

我通过jQuery AJAX获取行的内容，然后在表中添加新内容。问题在于某些内容可能会从数据库中删除，在这种情况下，我还希望将其实时从表中删除。

我怀疑我需要遍历表div ID并删除AJAX响应中不存在的所有ID，但是我不确定如何将它们与数据响应进行比较然后删除它们：

function startRecords() {
  $.ajax({
    url: URL,
    dataType: 'json',
    success: function(data) {
      var res = data;

      for (var i = 0, len = res.length; i < len; i++) {
        if ($("#records-row-" + res[i].id).length == 0) {
          $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
        }
      }

      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    },
    cache: false
  }).fail(function(jqXHR, textStatus, error) {
    var delay = 3000;
    setTimeout(function() {
      startRecords();
    }, delay);
  });
}

关于如何实现这一目标的任何建议？

Answer 1

您将先进入“ records-content” div，而无需先清除它。您需要添加

$("#records-content tbody").html('')

在开始for循环之前。这样，只有数据库表中的当前数据才会填充到表中。

Answer 2

在添加新记录之前，请使用empty()清除记录。

function startRecords() {
  $.ajax({
    url: URL,
    dataType: 'json',
    success: function(res) {
      $("#records-content tbody").empty();

      for (var i = 0, len = res.length; i < len; i++) {
        if ($("#records-row-" + res[i].id).length == 0) {
          $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
        }
      }

      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    },
    cache: false
  }).fail(function(jqXHR, textStatus, error) {
    var delay = 3000;
    setTimeout(function() {
      startRecords();
    }, delay);
  });
}

Answer 3

要从服务器中删除不在响应中的元素。

在success: function(res) {之后添加以下内容

var currentRows = $("[id^=records-row-]").toArray()
var currentRowsId = currentRows.map(function(row) { return row.id })
var resRows = res.map(function(row) { return "records-row-" + row.id })
var removeRows = currentRowsId.filter(function(rowId) { return resRows.indexOf(rowId) === -1 })
removeRows.forEach(function(rowId) { $("#" + rowId).remove() })

看起来像这样

function startRecords() {
    $.ajax({
      url: URL,
      dataType: 'json',
      success: function(res) {
        var currentRows = $("[id^=records-row-]").toArray()
        var currentRowsId = currentRows.map(function(row) { return row.id })
        var resRows = res.map(function(row) { return "records-row-" + row.id })
        var removeRows = currentRowsId.filter(function(rowId) { return resRows.indexOf(rowId) === -1 })
        removeRows.forEach(function(rowId) { $("#" + rowId).remove() })

        for (var i = 0, len = res.length; i < len; i++) {
          if ($("#records-row-" + res[i].id).length == 0) {
            $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
          }
        }

        var delay = 3000;
        setTimeout(function() {
          startRecords();
        }, delay);
      },
      cache: false
    }).fail(function(jqXHR, textStatus, error) {
      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    });
  }

有评论

var currentRows = $("[id^=records-row-]").toArray() // get rows with id starting with "records-row-"
var currentRowsId = currentRows.map(function(row) { return row.id }) // extract ids from rows
var resRowsId = res.map(function(row) { return "records-row-" + row.id }) // extract ids from response that will be added to DOM
var removeRows = currentRowsId.filter(function(rowId) { return resRowsId.indexOf(rowId) === -1 }) // remove every element that is added to DOM and in response from server
removeRows.forEach(function(rowId) { $("#" + rowId).remove() }) // remove elements that are not in response and is added to DOM

替代解决方案

$("#records-content tbody").empty();每次客户端从服务器获取新数据时都会删除每个元素。

根据jQuery AJAX响应中不存在的ID删除div

3 个答案:

要从服务器中删除不在响应中的元素。

替代解决方案