LoginSignup
0
0

More than 1 year has passed since last update.

@jonny1(jonny)

HTMLのテーブル操作（列の表示/非表示を切替）

Last updated at Posted at 2022-07-09

やりたいこと

① レスポンシブ
② Bootstrap使ってみたい
③ テーブルの列を操作したい（表示/非表示を切替）　※メイン

フォルダ構成

Test
　├ html
　│　└ test01.html
　├ js
　│　└ display_column_switching.js

早速書いてみた（「Setting」ボタン以外は適当）

test01.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/style.css" />
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row my-3">
            <div class="col bg-primary text-white">header</div>
        </div>

        <div class="row text-center mx-4">
            <div class="col-12 col-lg-4  my-1 my-lg-3 btn-group">
                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuClickable"
                    data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                    <i class="bi bi-house"></i>
                    Home
                </button>
            </div>
            <div class="col-12 col-lg-4 my-1 my-lg-3 btn-group">
                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuClickable"
                    data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                    <i class="bi bi-caret-right-square"></i>
                    Youtube
                </button>
            </div>
            <div class="col-12 col-lg-4 my-1 mb-3 my-lg-3 btn-group">
                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuClickable"
                    data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                    <i class="bi bi-gear"></i>
                    Setting
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check1" checked>
                            <label for="check1">column1</label>
                        </a>
                    </li>
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check2" checked>
                            <label for="check2">column2</label>
                        </a>
                    </li>
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check3" checked>
                            <label for="check3">column3</label>
                        </a>
                    </li>
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check4" checked>
                            <label for="check4">column4</label>
                        </a>
                    </li>
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check5" checked>
                            <label for="check5">column5</label>
                        </a>
                    </li>
                    <li class="w-100">
                        <a class="dropdown-item" href="#">
                            <input type="checkbox" onclick="getId(this)" id="check6" checked>
                            <label for="check6">column6</label>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row text-center overflow-scroll mx-4">
        <table class="table table-responsive table-hover flex-nowrap">
            <!-- ROW -->
            <tr class="table-dark">
                <th class="col-2 border one">column1</th>
                <th class="col-2 border two">column2</th>
                <th class="col-2 border three">column3</th>
                <th class="col-2 border four">column4</th>
                <th class="col-2 border five">column5</th>
                <th class="col-2 border six">column6</th>
            </tr>
            <!-- COL1 -->
            <tr>
                <td class="col-2 border one">content1</td>
                <td class="col-2 border two">content2</td>
                <td class="col-2 border three">content3</td>
                <td class="col-2 border four">content4</td>
                <td class="col-2 border five">content5</td>
                <td class="col-2 border six">content6</td>
            </tr>
            <!-- COL2 -->
            <tr>
                <td class="col-2 border one">content1</td>
                <td class="col-2 border two">content2</td>
                <td class="col-2 border three">content3</td>
                <td class="col-2 border four">content4</td>
                <td class="col-2 border five">content5</td>
                <td class="col-2 border six">content6</td>
            </tr>
            <!-- COL3 -->
            <tr>
                <td class="col-2 border one">content1</td>
                <td class="col-2 border two">content2</td>
                <td class="col-2 border three">content3</td>
                <td class="col-2 border four">content4</td>
                <td class="col-2 border five">content5</td>
                <td class="col-2 border six">content6</td>
            </tr>
        </table>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="../js/display_column_switching.js"></script>
</body>

</html>
display_column_switching.js
'use strict'

function getId(ele) {
  // テーブルの列を取得
  const column1 = document.getElementsByClassName('one');
  const column2 = document.getElementsByClassName('two');
  const column3 = document.getElementsByClassName('three');
  const column4 = document.getElementsByClassName('four');
  const column5 = document.getElementsByClassName('five');
  const column6 = document.getElementsByClassName('six');

  // チェックボックス１押下時の判定
  if (!ele.checked && ele.id === 'check1') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column1).hide();
  } else if (ele.checked && ele.id === 'check1') {
    // チェックをつけた列名をテーブルへ再表示
    $(column1).show();
  }

  // チェックボックス２押下時の判定
  if (!ele.checked && ele.id === 'check2') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column2).hide();
  } else if (ele.checked && ele.id === 'check2') {
    // チェックをつけた列名をテーブルへ再表示
    $(column2).show();
  }

  // チェックボックス３押下時の判定
  if (!ele.checked && ele.id === 'check3') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column3).hide();
  } else if (ele.checked && ele.id === 'check3') {
    // チェックをつけた列名をテーブルへ再表示
    $(column3).show();
  }

  // チェックボックス４押下時の判定
  if (!ele.checked && ele.id === 'check4') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column4).hide();
  } else if (ele.checked && ele.id === 'check4') {
    // チェックをつけた列名をテーブルへ再表示
    $(column4).show();
  }

  // チェックボックス５押下時の判定
  if (!ele.checked && ele.id === 'check5') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column5).hide();
  } else if (ele.checked && ele.id === 'check5') {
    // チェックをつけた列名をテーブルへ再表示
    $(column5).show();
  }

  // チェックボックス６押下時の判定
  if (!ele.checked && ele.id === 'check6') {
    //チェックを外した列名をテーブルから削除（隠す）
    $(column6).hide();
  } else if (ele.checked && ele.id === 'check6') {
    // チェックをつけた列名をテーブルへ再表示
    $(column6).show();
  }
}

結果

初期表示
image.png

「column1」のチェックを外したとき
image.png

最後に

「display_column_switching.js」のコードをもっとすっきりさせたい願望が出てきましたが、
今の僕の実力だとこれが限界です。。良かったら理想的なコードを教えていただけると幸いです。

コメントありがとうございます！

@rrt4937 さんからスッキリコードいただいております。
詳細は以下コメントにてご確認ください。

0
0
2

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
Sign upLogin
0
0