実装したいもの
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"は消しても動作する。必要に応じて使い分ける。