「テーブル内の列の表示・非表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

テーブル内の列の表示・非表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブル内の列の表示・非表示</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/* ============================================
* クリックしたときの線の処理が面倒なので
* 基本、下線なし。
* ただし、最後の行の下線だけありする。
============================================ */
$("table").find("th").css("border-bottom", "none");
$("table").find("td").css("border-bottom", "none");
$("table").find("tr:last-child th").css("border-bottom", "1px solid #ccc");
$("table").find("tr:last-child td").css("border-bottom", "1px solid #ccc");
/* ============================================
* テーブル内のテーブルの設定
============================================ */
var inTbl = $('.inTbl');
// テーブル内のテーブルの親のtdのpaddingを0にする
$(inTbl).parent("td").css("padding", "0");
// テーブル内のテーブルのセルに線をつける
$(inTbl).find("th").css("border", "1px solid #ccc");
$(inTbl).find("td").css("border", "1px solid #ccc");
// テーブル内のテーブル内のtdとthの左側の線を消す
$(inTbl).find("th").css("border-left", "none");
$(inTbl).find("td").css("border-left", "none");
// テーブル内のテーブル内のtr内の最後の要素の右側の線を消す
$(inTbl).find("tr :last-child").css("border-right", "none");
// テーブル内のテーブル内の最初のtr内のthとtdの上側の線を消す
$(inTbl).find("tr:first-child th").css("border-top", "none");
$(inTbl).find("tr:first-child td").css("border-top", "none");
// テーブル内のテーブル内の最後のtr内のthとtdの下側の線を消す
$(inTbl).find("tr:last-child th").css("border-bottom", "none");
$(inTbl).find("tr:last-child td").css("border-bottom", "none");
/* ============================================
* 表示・非表示リンクのセット
============================================ */
$("a.x").bind("click", openPrice);
});
var openPrice = function (e) {
// クリックされた「親のtrタグ」の「次のtrタグ」
var openMonth = $(this).parents("tr").next("tr");
// IEのバージョンによっては「display」の値に「table」が使えないかも。
var openMonthDisplay = "table";
// 「子要素のclass="inTbl"」のCSS（displayの値）で条件分岐
if ($(openMonth).find(".inTbl").css("display") == openMonthDisplay)
{
// 「openMonth」の「子要素のclass="inTbl"」
$(openMonth).find(".inTbl").css("display", "none");
// 「openMonth」の「子要素のth、td」
$(openMonth).children("th").css("border-top", "none");
$(openMonth).children("td").css("border-top", "none");
// クリックした表示・非表示
$(this).text("▼表示");
}
else
{
// 「openMonth」の「子要素のclass="inTbl"」
$(openMonth).find(".inTbl").css("display", openMonthDisplay);
// 「openMonth」の「子要素のth、td」
$(openMonth).children("th").css("border-top", "1px solid #ccc");
$(openMonth).children("td").css("border-top", "1px solid #ccc");
// クリックした表示・非表示
$(this).text("▲非表示");
}
return false;
};
</script>
<style>
table
{
border-collapse:collapse;
width:100%;
}
th, td
{
text-align:left;
vertical-align:top;
padding:3px;
font-weight:normal;
border:1px solid #ccc;
background:#fff;
font-size:12px;
}
th{background:#eee;}
</style>
</head>
<body>
<h1>テーブル内の列の表示・非表示</h1>
<table>
<tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上：1月</b></th></tr>
<tr><td colspan="2">
<table class="inTbl">
<tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
<tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
</table>
</td></tr>
<tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上：2月</b></th></tr>
<tr><td colspan="2">
<table class="inTbl">
<tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
<tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
</table>
</td></tr>
<tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上：3月</b></th></tr>
<tr><td colspan="2">
<table class="inTbl">
<tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
<tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
</table>
</td></tr>
</table>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>