javascript - Javascript 显示 block && 无重复问题

Question

我有一个简单的html table其中有姓名、月收入和收入。我编写了一个简单的函数，它采用 <tds> 的值但只有月收入和收入。如果都是0，一键隐藏所有<tr> ，如果您愿意，可以显示 <tr>再次.. 我的代码工作正常。问题是，当我按隐藏然后显示时..它返回给我特定 <tr> 的异常结果我真的不知道为什么..

function hideZeros() {
  let trs, tds, td1, td2, total, i;

  trs = document.getElementsByTagName("tr");

  for (i = 1; i < trs.length; i++) {

    tds = trs[i].getElementsByTagName("td");

    td1 = parseInt(tds[1].innerHTML);
    td2 = parseInt(tds[2].innerHTML);

    total = (td1 + td2);

    if (total === 0) {
      if (trs[i].style.display === "none") {
        trs[i].style.display = "block";

      } else {
        trs[i].style.display = "none";
      }
    }

  }

}

<table>
  <tr>
    <th>Name</th>
    <th>Monthly Income</th>
    <th>Income</th>
  </tr>

  <tbody>
    <tr>
      <td>Jim</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Joe</td>
      <td>100.000</td>
      <td>50.000</td>
    </tr>
  </tbody>
</table>

<button onclick="hideZeros()" class="btn btn-primary" type="button">Click</button>

Answer 1

默认display <tr> 的值是 table-row不是block .