javascript - 当变量发生变化时如何创建动态表？

Question

我正在了解如何加载动态表，动态表中显示的结果数组是从更大的数组中过滤出来的。

- 该脚本不在 JSFiddle 中运行，否则我会链接一个示例 -

当前发生的情况是，每次单击按钮时，过滤后的结果数组都会被推送到动态表中使用的数组中。我可以看到问题所在，它是使用 push() 方法。

我无法调整我的语法，也许我需要每次都能够替换整个数组，而不是将过滤结果推送到数组中。

代码

var chars = {
  [0671]: {
    tier: 1,
    name: 'John Doe',
    id: '7813',
  },
  [0748]: {
    tier: 1,
    name: 'Jane Doe',
    id: '5461',
  },
  [0478]: {
    tier: 2,
    name: 'Billy Bob',
    id: '8246',
  },
  [0475]: {
    tier: 2,
    name: 'Cindy Bob',
    id: '9634',
  },
};

//var tierChoice updates onclick, runs *result function*
var tierChoice = 1;

function tierSelect(tierVar) {
  tierChoice = tierVar;
  results();
}

//*result function* filters var chars, pushes into var results
var result = [];

function results() {
  for (var i in chars) {
    if (chars[i].tier == tierChoice) {
      result.push(chars[i]);
    }
  }
  charStats();
}

//*charStats function* creates a dynamic table, using a filtered array from var results
function charStats() {
  var buf = '';
  var header = '<tr><td width="100px">Name</td><td width="100px">ID</td></tr>';
  for (var i in result) {
    buf += '<tr>\n';
    buf += '<td>' + result[i].name + '</td>\n';
    buf += '<td>' + result[i].id + '</td>\n';
    buf += '</tr>\n';
  }
  document.getElementById("demo").innerHTML = header + buf;
}

<table style="margin:0 auto;">
  <tr>
    <td><input type="button" value="Tier 1" onclick="tierSelect(1)"></input>
    </td>
    <td><input type="button" value="Tier 2" onClick="tierSelect(2)"></input>
    </td>
  </tr>
</table>
<!-- dynamic table is HTML below -->
<table border="border:1px solid #fff" style="border-collapse:collapse; margin:0 auto" id="demo">
</table>

简而言之:单击第一个按钮应将 John Doe 和 Jane Doe 及其 id 放入结果中，单击第二个按钮应将 Cindy Bob 和 Billy Bob 及其 id 放入结果中，这几乎是正确完成的，但问题是这些结果被附加到以前的结果中，而不是覆盖它们。

Answer 1

你的代码几乎是正确的，你只需要在results中重新初始化result:

function results() {
  result = [];
  for (var i in chars) {
    if (chars[i].tier == tierChoice) {
      result.push(chars[i]);
    }
  }
  charStats();
}

此外，您不需要关闭 input 标记，因为它们是原子的，因此将 HTML 更改为

<table style="margin:0 auto;">
  <tr>
    <td><input type="button" value="Tier 1" onclick="tierSelect(1)">
    </td>
    <td><input type="button" value="Tier 2" onClick="tierSelect(2)">
    </td>
  </tr>
</table>

fiddle :https://jsfiddle.net/het26c1n/