Display block && none duplicate issue with Javascript

user_14831589 0
Viewed 59

I have a simple html table which has Name, Monthly Income and Income. I wrote a simple function that takes the values of the <tds> but only the Monthly Income and Income. If they are both 0 with one click hide the all the <tr>, and if you want you can show the <tr> again.. My code works fine. THE PROBLEM is, when i press hide and then show.. it is returning me an abnormal result of the specific <tr> i seriously don't know why..

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>

html javascript
2 Answers

The default display value for a <tr> is table-row not block.

Dorward_190680

This is because by default the style of a tr element is not "block" but "table-row"

user_14569550
Related