LoginSignup
9

More than 3 years have passed since last update.

Javascriptでテーブルの特定列の表示・非表示を切り替える

Posted at

実装したいもの

HTMLのテーブルで、チェックボックスを用いて、列ごとに値の表示・非表示を行いたい。

  • 住所
  • 年齢
氏名 住所 年齢
山田 東京 20
佐藤 神奈川 24
渡辺 大阪 18

たとえば、上記テーブルで「住所」の列だけを、非表示になるようにしたい。

  • 住所
  • 年齢
氏名 年齢
山田 20
佐藤 24
渡辺 18

こんな感じ。

コード

以下のようにコードを記述する。テーブルはPHPで出力していてもよい。

sample.html
<body>
<input type="checkbox" id="address_check" onclick="checkbox_cell(this,'address_display')" checked="checked">住所
<input type="checkbox" id="age_check" onclick="checkbox_cell(this,'age_display')" checked="checked">年齢
<table>
 <tr>
  <th>氏名</th>
  <th id="address_display">住所</th>
  <th id="age_display">年齢</th>
 </tr>
 <tr>
  <td>山田</td>
  <td>東京</td>
  <td>20</td>
 </tr>
 <tr>
  <td>佐藤</td>
  <td>神奈川</td>
  <td>24</td>
 </tr>
 <tr>
  <td>渡辺</td>
  <td>大阪</td>
  <td>18</td>
 </tr>
</table>
</body>
sample.js
window.onload = function(){
var array = ["address","age"];
    for(var j=0;j<array.length;j++){
        var id = array[j] + "_display";
        var obj = array[j] + "_check";
        var CELL = document.getElementById(id);
        var TABLE = CELL.parentNode.parentNode.parentNode;
        for(var i=0;TABLE.rows[i];i++) {
            TABLE.rows[i].cells[CELL.cellIndex].style.display = (document.getElementById(obj).checked) ? '' : 'none';
        }
    }
}
function checkbox_cell( obj,id ){
    var CELL = document.getElementById(id);
    var TABLE = CELL.parentNode.parentNode.parentNode;
    for(var i=0;TABLE.rows[i];i++) {
        TABLE.rows[i].cells[CELL.cellIndex].style.display = (obj.checked) ? '' : 'none';
    }
}

注意点

  • 先にJavascriptを読み込んでおく。
  • checked="checked"は消しても動作する。必要に応じて使い分ける。

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9