Show/Hidden de fila de la table en página HTML con Jquery.

Cómo mostrar/ocultar filas de una tabla en HTML usando Jquery. Puede que no uses esto muy a menudo, pero me llevó mucho tiempo encontrarlo, así que lo dejo como recordatorio.

DEMO

the Pen JS-table_row_on-off by AGUA Web (@AG
UA)
on CodePen.

Javascript

Esta vez se trata de un archivo externo, como ‘trshow.js’.

<script>
function _cb() {
    try {
        $(".row").css("display", "table-row");
    }
    catch(e) {}
}

$(document).ready(function() {

    var speed = 300;
    $("#radio01").click(function() {
        $(".cell01").slideDown(speed);
        $(".cell02").slideDown(speed);
        $(".row").slideDown(speed, _cb());
    });
    $("#radio02").click(function() {
        $(".cell01").slideUp(speed);
        $(".cell02").slideUp(speed);
        setTimeout(function() { $(".row").hide(); }, speed);
    });

});
</script>

HTML

Cargue el propio jquery, esta vez el archivo jquery y el archivo trshow.js anterior en la cabecera.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="directory/trshow.js"</script>

Los botones de <input> radio para el tipo de entrada controlan si se muestra u oculta.>
Añade tag que desea ocultar <tr> en table.

class=’row’
style=’display:none;’

*sin style=’display:none;’, estará inicialmente en estado de visualización.

<table>
  <thead>
    <tr>
      <th>  Title1</th>
      <th>  Title2</th>
      <th>  Title3</th>
    </tr>
    <tr>
      <th  colspan="3">
        <input  type="radio"  id="radio02"  name="sample_radios01"  checked="checked"  />  HIdden
        <input  type="radio"  id="radio01"  name="sample_radios01"  />  Show</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>  Item1</td>
      <td>  Item2</td>
      <td>  Item3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  hidden row</p>
      </td>
    </tr>
    <tr>
      <td>  Item1</td>
      <td>  Item2</td>
      <td>  Item3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  hidden row</p>
      </td>
    </tr>
    <tr>
      <td>  Item1</td>
      <td>  Item2</td>
      <td>  Item3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  hidden row</p>
      </td>
    </tr>
    <tr>
      <td>  Item1</td>
      <td>  Item2</td>
      <td>  Item3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  hidden row</p>
      </td>
    </tr>
  </tbody>
</table>

CSS

Podria cambiarse css style arbitrariamente para table.

table {
  width: 100%;
  border: 1px solid #808080;
  border-collapse: collapse;
}
table th {
  border: 1px solid #444;
  background: #888;
  color: #fff;
  padding: 10px;
}
table td {
  padding: 10px;
  border: 1px solid #808080;
}