Question

我有大量的代码，但是我只会显示我当前停留的部分。我要解决的问题是，当我将数据追加到表中并更改事件时，以前的数据也将追加到表中的新数据中。我了解有很多关于SO的文章，因此我在其中一些建议使用detach()的地方进行了查找。但是我不想以后再添加数据，因此不适用于我。我还尝试使用remove()，它可以工作，但是在事件更改时，它会在数据最初加载之前立即删除数据。

我没有控制台错误，所有内容都封装在document.ready()函数中

我想要实现的目标：

事件更改时，如果用户更改了输入，则加载数据，从上一个事件中删除先前的数据，并从当前事件中加载新数据。

这是我的代码：

var renameLocations;

switch(picker.chosenLabel){
  case "Example event1":
    renameLocations = [];

    dataLabel = <?php echo json_encode($locations) ?>;
    dataCount = <?php echo json_encode($count) ?>;

    var locationsPHP = <?php echo json_encode($locations) ?>;
    var countPHP = <?php echo json_encode($count) ?>;

    locationsPHP.forEach(function(item, i){
      //$('table#relevantdataModal').find('tbody').innerHTML = '';

      // This works but it deletes the data immediately on event change Rather than loading in data and deleting it later...

      $('table#relevantdataModal').find('tbody').remove();
      $('table#relevantdataModal').find('tbody').append('<tr><td>' + locationsPHP[i] + '</td><td>' + countPHP[i] + '</td></tr>');
    });
  break;
  
  case "Example event2":
    renameLocations = [];

    dataLabel = <?php echo json_encode($todaylocations) ?>;
    dataCount = <?php echo json_encode($todaycount) ?>;
  break;
} // End switch statement

Answer 1

您可能要尝试使用innerHTML来获取原始JavaScript，而不是remove（）和append（）。在jQuery中，这也可以通过.html（）完成。

在您的情况下，它将是：$（'table＃relevantdataModal'）。find（'tbody'）。html（...添加您的东西...）

这里有一些有关香草JS和jQuery的快速W3参考。

香草JS-W3 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml

jQuery-W3 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_set

事件更改后删除附加的先前数据

1 个答案: