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

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>テーブル内の列の表示・非表示</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9.   /* ============================================
  10.    * クリックしたときの線の処理が面倒なので
  11.    * 基本、下線なし。
  12.    * ただし、最後の行の下線だけありする。
  13.   ============================================ */
  14.   $("table").find("th").css("border-bottom", "none");
  15.   $("table").find("td").css("border-bottom", "none");
  16.   $("table").find("tr:last-child th").css("border-bottom", "1px solid #ccc");
  17.   $("table").find("tr:last-child td").css("border-bottom", "1px solid #ccc");
  18.   
  19.   /* ============================================
  20.    * テーブル内のテーブルの設定
  21.   ============================================ */
  22.   var inTbl = $('.inTbl');
  23.   // テーブル内のテーブルの親のtdのpaddingを0にする
  24.   $(inTbl).parent("td").css("padding", "0");
  25.   
  26.   // テーブル内のテーブルのセルに線をつける
  27.   $(inTbl).find("th").css("border", "1px solid #ccc");
  28.   $(inTbl).find("td").css("border", "1px solid #ccc");
  29.   // テーブル内のテーブル内のtdとthの左側の線を消す
  30.   $(inTbl).find("th").css("border-left", "none");
  31.   $(inTbl).find("td").css("border-left", "none");
  32.   // テーブル内のテーブル内のtr内の最後の要素の右側の線を消す
  33.   $(inTbl).find("tr :last-child").css("border-right", "none");
  34.   // テーブル内のテーブル内の最初のtr内のthとtdの上側の線を消す
  35.   $(inTbl).find("tr:first-child th").css("border-top", "none");
  36.   $(inTbl).find("tr:first-child td").css("border-top", "none");
  37.   // テーブル内のテーブル内の最後のtr内のthとtdの下側の線を消す
  38.   $(inTbl).find("tr:last-child th").css("border-bottom", "none");
  39.   $(inTbl).find("tr:last-child td").css("border-bottom", "none");
  40.   /* ============================================
  41.    * 表示・非表示リンクのセット
  42.   ============================================ */ 
  43.   $("a.x").bind("click", openPrice);
  44. });
  45. var openPrice = function (e) {
  46.   // クリックされた「親のtrタグ」の「次のtrタグ」
  47.   var openMonth = $(this).parents("tr").next("tr");
  48.   // IEのバージョンによっては「display」の値に「table」が使えないかも。
  49.   var openMonthDisplay = "table";
  50.   
  51.   // 「子要素のclass="inTbl"」のCSS(displayの値)で条件分岐
  52.   if ($(openMonth).find(".inTbl").css("display") == openMonthDisplay)
  53.   {
  54.     // 「openMonth」の「子要素のclass="inTbl"」
  55.     $(openMonth).find(".inTbl").css("display", "none");
  56.     // 「openMonth」の「子要素のth、td」
  57.     $(openMonth).children("th").css("border-top", "none");
  58.     $(openMonth).children("td").css("border-top", "none");
  59.     // クリックした表示・非表示
  60.     $(this).text("▼表示");
  61.   }
  62.   else
  63.   {
  64.     // 「openMonth」の「子要素のclass="inTbl"」
  65.     $(openMonth).find(".inTbl").css("display", openMonthDisplay);
  66.     // 「openMonth」の「子要素のth、td」
  67.     $(openMonth).children("th").css("border-top", "1px solid #ccc");
  68.     $(openMonth).children("td").css("border-top", "1px solid #ccc");
  69.     // クリックした表示・非表示
  70.     $(this).text("▲非表示");
  71.   }
  72.   
  73.   return false;
  74. };
  75. </script>
  76. <style>
  77.   table
  78.   {
  79.     border-collapse:collapse;
  80.     width:100%;
  81.   }
  82.   th, td
  83.   {
  84.     text-align:left;
  85.     vertical-align:top;
  86.     padding:3px;
  87.     font-weight:normal;
  88.     border:1px solid #ccc;
  89.     background:#fff;
  90.     font-size:12px;
  91.   }
  92.   th{background:#eee;}
  93. </style>
  94. </head>
  95. <body>
  96. <h1>テーブル内の列の表示・非表示</h1>
  97. <table>
  98. <tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上:1月</b></th></tr>
  99. <tr><td colspan="2">
  100.   <table class="inTbl">
  101.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  102.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  103.   </table>
  104. </td></tr>
  105. <tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上:2月</b></th></tr>
  106. <tr><td colspan="2">
  107.   <table class="inTbl">
  108.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  109.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  110.   </table>
  111. </td></tr>
  112. <tr><td style="width:6em;"><a href="#" class="x">▲非表示</a></td><th><b>売上:3月</b></th></tr>
  113. <tr><td colspan="2">
  114.   <table class="inTbl">
  115.   <tr><th>残数</th><th>仕入本数</th><th>売上本数</th><th>事故品</th><th>不良食品</th></tr>
  116.   <tr><td>350本</td><td>1,000本</td><td>624本</td><td>23本</td><td>3本</td></tr>
  117.   </table>
  118. </td></tr>
  119. </table>
  120. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  121. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  122. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  123. </div>
  124. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  125. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  126. </div>
  127. </body>
  128. </html>