每次在下拉列表中更改内容时，如何停止附加表格。

Question

我正在使用jquery ajax调用遇到棘手的问题。 我有以下事件触发对相应网址的ajax调用，并将绘制图表。

绘制图表后，我想在表格中显示该图表的相应数据，所以我附加了一个表格如下

$('#managers').on("change", function(){
var drawBubbleChart = bubbleChart.getData();
bubbleChart.drawchart(drawBubbleChart);
$.each(drawBubbleChart, function(index, value) {
    $('#bubbleChart3').append('<tr style =background: black; color: "white"><td>'+value[3]+'</td><td>'+value[0].toFixed(2)+'</td><td>'+value[1].toFixed(2)+'</td><td>'+value[2].toFixed(2)+'</td></tr>');
  });

它的工作原理如下：

这是我第一次更改下拉菜单，但每次我更改了下拉菜单时，它会将数据和图表附加在此之上，这不应该发生。 如果有人知道如何阻止这个？会更感激

Answer 1

你可以替换行，而不是追加它们吗？

$('#managers').on("change", function() {
    var drawBubbleChart = bubbleChart.getData();
    bubbleChart.drawchart(drawBubbleChart);
    var rows = '';
    $.each(drawBubbleChart, function(index, value) {
        rows + ='<tr style =background: black; color: "white"> <td>'+value[3]+'</td><td>'+value[0].toFixed(2)+'</td><td>'+value[1].toFixed(2)+'</td><td>'+value[2].toFixed(2)+'</td></tr>';
    $('#bubbleChart3').html(rows);
});

<强>更新

要保留标题行，您可以将它们放在<thead>元素中，然后放置一个空的<tbody>元素。然后，您可以将最后一行代码更改为：

$('#bubbleChart3').children('tbody').html(rows);