不器用(TOT) エンジニアの気ままにプログラミング

~考え、作って、また考える~

HTMLで一覧表示したテーブルの表示制御

メインブログにHTMLで簡易に一覧化することを

書いていました。

shevhome.hatenablog.com

 

実際の簡易なソースも共有しておこうと考え、

ここに載せときます。

下記のソースのうち、

黒色部分・・・HTML+CSSjavaScript固定

黄色部分・・・Excelで一覧管理してテーブルの要素を作成する。

 

黒い部分のみのファイルを1ファイルで用意しておいて、

黄色い部分を追加していくイメージです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>一覧</title>
<script type="text/javascript">

function init() {
    chkboxChange('Kbn1','chkKbn1');
    chkboxChange('Kbn2','chkKbn2');
    chkboxChange('Kbn3','chkKbn3');
}

function chkboxChange(chkName,chkId) {
    var tbl = document.getElementById('tbl');
    var chk = document.getElementById(chkId);
    var bol = false;
    if (chk.checked === false) {
        bol = true;
    }
    for(var idx = 1; idx < tbl.rows.length;idx++) {
        if (tbl.rows[idx].cells[0].innerHTML === chkName) {
            tbl.rows[idx].hidden = bol
        }
    } 
}
</script>
<style type="text/css">
tr:hover {
background-color:lightblue;
}
</style>
</head>
<body onLoad="init();">
<header>一覧</header>
<nav>
<p>
区分:<input type="checkbox" id="chkKbn1" checked="checked" onchange="chkboxChange('Kbn1','chkKbn1');">区分1
<input type="checkbox" id="chkKbn2" checked="checked" onchange="chkboxChange('Kbn2','chkKbn2');">区分2
<input type="checkbox" id="chkKbn3" checked="checked" onchange="chkboxChange('Kbn3','chkKbn3');">区分3
</p>
</nav>
<article>
<section>
<table border="1" rules="all" id="tbl">
<tr style="background-color:#FFFF00;">
<th style="width: 200px;">区分</th>
<th style="width: 200px;">Header1</th>
<th style="width: 200px;">Header2</th>
</tr>
<tr>
<td>Kbn1</td>
<td>text1-1</td>
<td>text1-2</td>
</tr>
<tr>
<td>Kbn2</td>
<td>text12-1</td>
<td>text1-2</td>
</tr>
<tr>
<td>Kbn1</td>
<td>text1-1</td>
<td>text1-2</td>
</tr>
<tr>
<td>Kbn3</td>
<td>text1-1</td>
<td>text1-2</td>
</tr>
</table>
</section>
</article>
<footer></footer>
</body>
</html>