每次表行都在增加[重复]答案

【问题标题】：Table rows are getting increased every time [duplicate]每次表行都在增加[重复]
【发布时间】：2019-08-07 13:38:22
【问题描述】：

我在单击 div 时在模型弹出窗口上显示一个表格。表数据是动态的，即它来自 api 响应。但问题是，当我关闭弹出窗口并再次单击 div 以打开模型弹出窗口时，表格行会附加到之前生成的行中。我无法理解这种行为。理想情况下，当我们打开模型弹出窗口时，表格也应该重新生成。

请注意，我在 JS 中对响应进行了硬编码，仅供参考。

<table id="quality_table" style="margin-top: 25px">
  <thead id="qualityTableHead">
    <tr id="qualityTableTR">
      <th></th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="qualityTableBody">
    <tr id="qualityTableData"></tr>
  </tbody>
</table>

var data = [{
  "projectStatus": "ERROR",
  "buildName": "otfa_R5-10_3",
  "ignoredConditions": false,
  "build": "Build 1",
  "conditions": [{
    "comparator": "GT",
    "metricKey": "new_security_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_reliability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_maintainability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "OK"
  }, {
    "comparator": "LT",
    "metricKey": "new_coverage",
    "errorThreshold": 80,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_duplicated_lines_density",
    "errorThreshold": 3,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }]
}, {
  "projectStatus": "SUCCESS",
  "buildName": "otfa_R5-91_2",
  "ignoredConditions": false,
  "build": "Build 2",
  "conditions": [{
    "comparator": "GT",
    "metricKey": "new_security_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_reliability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_maintainability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "OK"
  }, {
    "comparator": "LT",
    "metricKey": "new_coverage",
    "errorThreshold": 80,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_duplicated_lines_density",
    "errorThreshold": 3,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }]
}, {
  "projectStatus": "WARNING",
  "buildName": "otfa_R5-9_1",
  "ignoredConditions": false,
  "build": "Build 3",
  "conditions": [{
    "comparator": "GT",
    "metricKey": "new_security_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_reliability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_maintainability_rating",
    "errorThreshold": 1,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "OK"
  }, {
    "comparator": "LT",
    "metricKey": "new_coverage",
    "errorThreshold": 80,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }, {
    "comparator": "GT",
    "metricKey": "new_duplicated_lines_density",
    "errorThreshold": 3,
    "actualValue": 0,
    "periodIndex": 1,
    "status": "ERROR"
  }]
}];

$.each(data, function(key, value) {
  $('#quality_table').find('tbody').append('<tr id=qualityTableData><td>' + value.build + '</td>' + '<td>' + value.projectStatus + '</td></tr>');
});

请帮我解决这个奇怪的问题。可能是我错过了一小部分。任何帮助将不胜感激

【问题讨论】：

您必须在再次追加之前清理表格 html。我会尽快发布代码
这是因为append() 添加到现有内容。要清除此问题，请在 $.each() 循环之前调用 $('#quality_table').find('tbody').empty()
谢谢你们俩。它对我有用。

标签： jquery html

【解决方案1】：

你需要在追加数据之前清理表

$('#quality_table').find('tbody').empty();

$.each(data, function(key,value) {
                $('#quality_table').find('tbody').append('<tr id=qualityTableData><td>'+value.build+'</td>'+'<td>'+value.projectStatus+'</td></tr>');
            });

【讨论】：

谢谢萨钦..我错过了这个小部分，谢谢你的帮助。