How to hide and enable a table line?

Question

I don’t know what happens, but when I start the screen with the display block in the odd id, everything ok but when disabled, and enabled again, the column fields appear all in the first column

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none") {
    document.getElementById(el).style.display = 'block';
  } else {
    document.getElementById(el).style.display = 'none';
  }
}

table {
  width: 100%;
  height: 100%;
}

thead tr {
  background-color: ActiveCaption;
  color: CaptionText;
}

th,
td {
  vertical-align: top;
  font-family: "Tahoma";
  font-size: 10pt;
  text-align: left;
  cursor: pointer;
}

#impar {
  display: none;
}

<table>
  <thead>
    <tr>
      <th class="col0">COLUNA 1</th>
      <th class="col1">COLUNA 2</th>
      <th class="col2">COLUNA 3</th>
    </tr>
  </thead>
  <tbody>
    <tr id="par" onclick="Mudarestado('impar')">
      <td class="col0">CAMPO DA COLUNA 1</td>
      <td class="col1">CAMPO DA COLUNA 2</td>
      <td class="col2">CAMPO DA COLUNA 3</td>
    </tr>
    <tr id="impar">
      <td>CAMPO OBSERVACAO DA COLUNA 1</td>
      <td>CAMPO OBSERVACAO DA COLUNA 2</td>
      <td>CAMPO OBSERVACAO DA COLUNA 3</td>
    </tr>
  </tbody>
</table>

Answer 1

This is because the element display value is not block, but table-Row.

This setting in the Changestatus() function solves the problem:

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none") {
    document.getElementById(el).style.display = 'table-row';
  } else {
    document.getElementById(el).style.display = 'none';
  }
}

<table>
    <thead>
      <tr>
        <th class="col0">COLUNA 1</th>
        <th class="col1">COLUNA 2</th>
        <th class="col2">COLUNA 3</th>
      </tr>
    </thead>
    <tbody>
      <tr id="par" onclick="Mudarestado('impar')">
        <td class="col0">CAMPO DA COLUNA 1</td>
        <td class="col1">CAMPO DA COLUNA 2</td>
        <td class="col2">CAMPO DA COLUNA 3</td>
      </tr>
      <tr id="impar" style="display: none;">
        <td>CAMPO OBSERVACAO DA COLUNA 1</td>
        <td>CAMPO OBSERVACAO DA COLUNA 2</td>
        <td>CAMPO OBSERVACAO DA COLUNA 3</td>
      </tr>
    </tbody>
  </table>

Edit: I removed the CSS, and added the display: none inline in line #odd, as it was causing a problem in the first click, since the element.style.display only reads inline styles.

Answer 2

Hello, instead of block, put table-Row. I hope I helped Document.getElementById(el).style.display = 'table-Row';

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none") {
    document.getElementById(el).style.display = 'table-row';
  } else {
    document.getElementById(el).style.display = 'none';
  }
}

table {
  width: 100%;
  height: 100%;
}

thead tr {
  background-color: ActiveCaption;
  color: CaptionText;
}

th,
td {
  vertical-align: top;
  font-family: "Tahoma";
  font-size: 10pt;
  text-align: left;
  cursor: pointer;
}

#impar {
  display: none;
}

<table>
  <thead>
    <tr>
      <th class="col0">COLUNA 1</th>
      <th class="col1">COLUNA 2</th>
      <th class="col2">COLUNA 3</th>
    </tr>
  </thead>
  <tbody>
    <tr id="par" onclick="Mudarestado('impar')">
      <td class="col0">CAMPO DA COLUNA 1</td>
      <td class="col1">CAMPO DA COLUNA 2</td>
      <td class="col2">CAMPO DA COLUNA 3</td>
    </tr>
    <tr id="impar">
      <td>CAMPO OBSERVACAO DA COLUNA 1</td>
      <td>CAMPO OBSERVACAO DA COLUNA 2</td>
      <td>CAMPO OBSERVACAO DA COLUNA 3</td>
    </tr>
  </tbody>
</table>