【JS】HTMLページでTableの行を表示／非表示

Jqueryを使用してHTMLでTableの行を表示／非表示させる方法。あまり使う機会はないかもしれませんが、見つけるまでにだいぶ時間がかかったので覚え書きとして残しておきます。

サンプルDEMO

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

Javascriptファイル

今回は外部ファイルで「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ファイル

ヘッダにjquery本体と今回のjqueryファイルと上記trshow.jsファイルを読み込みます。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="外部ファイルを保存したフォルダ/trshow.js"</script>

<input>タイプのラジオボタンで表示／非表示を制御します。
tableタグで非表示にしたい<tr>タグに

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

を追加します。

※style=”display:none;”をつけないと初期は表示状態になります。

<table>
  <thead>
    <tr>
      <th>  タイトル1</th>
      <th>  タイトル2</th>
      <th>  タイトル3</th>
    </tr>
    <tr>
      <th  colspan="3">
        <input  type="radio"  id="radio02"  name="sample_radios01"  checked="checked"  />  非表示
        <input  type="radio"  id="radio01"  name="sample_radios01"  />  表示</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>  項目1</td>
      <td>  項目2</td>
      <td>  項目3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  非表示の行</p>
      </td>
    </tr>
    <tr>
      <td>  項目1</td>
      <td>  項目2</td>
      <td>  項目3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  非表示の行</p>
      </td>
    </tr>
    <tr>
      <td>  項目1</td>
      <td>  項目2</td>
      <td>  項目3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  非表示の行</p>
      </td>
    </tr>
    <tr>
      <td>  項目1</td>
      <td>  項目2</td>
      <td>  項目3</td>
    </tr>
    <tr  class="row"  style="display:none;">
      <td  colspan="5">
        <p>  非表示の行</p>
      </td>
    </tr>
  </tbody>
</table>

CSSファイル

cssは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;
}