0

1のチェックボックスをクリックするとサンプル1だけ表示され、サンプル2とサンプル3は表示されないようにしたいです。1がチェックされると画像のように表示されるようにしたいです。
それと同じでサンプル2がクリックされたらサンプル1とサンプル3が表示されないようにといった感じです。。
分かる方、ご教示頂きたいです。

画像の説明をここに入力

td {
    border: solid 1px;            
}
 
table {
    border-collapse:  collapse;     
}

.up_down_border {
  border-top-style: none;
  border-bottom: none;
}

.bottom_border {
  border-bottom: none;
}

.top_border {
  border-top: none;
}
<body>
      <div>
          <input type="checkbox" onclick="sample1()">1のみ
      </div>
      <div>
          <input type="checkbox" onclick="sample2()">2のみ
      </div>
      <div>
          <input type="checkbox" onclick="sample3()">3のみ
      </div>

  <script>
    var flag = false;
    function sample1() {
      flag = true;
      sampleTable();
    }
    function sampleTable() {
      const table = document.createElement("table");
      const tableBody = {
          rows: [
            [{ value: "red" }, { value: "blue" }],
            [{ value: "メニュー", rowSpan: 8 }],
            [{ value: "サンプル1",className: "up_down_border" }],
            [{ value: "サンプル1", className: "top_border" }],
            [{ value: "サンプル2", className: "up_down_border" }],
            [{ value: "サンプル2", className: "top_border" }],
            [{ value: "サンプル3", className: "up_down_border" }],
            [{ value: "サンプル3", className: "up_down_border" }],
            [{ value: "サンプル3", className: "top_border" }],
            [{ value: "メニュー", rowSpan: 8 }],
            [{ value: "サンプル1", className: "up_down_border" }],
            [{ value: "サンプル1", className: "top_border" }],
            [{ value: "サンプル2", className: "up_down_border" }],
            [{ value: "サンプル2", className: "top_border" }],
            [{ value: "サンプル3", className: "up_down_border" }],
            [{ value: "サンプル3", className: "up_down_border" }],
            [{ value: "サンプル3", className: "top_border" }],
          ]
        };
      for (var i = 0; i < tableBody.rows.length; i++) {
        const cols = tableBody.rows[i];
        const tr = document.createElement("tr");
        for (var j = 0; j < cols.length; j++) {
          const col = cols[j];
          const td = document.createElement("td");
          td.innerHTML = col.value;
          if (col.className) {
            td.className = col.className;
          }
          if (col.rowSpan >= 0) {
            td.rowSpan = col.rowSpan;
          }
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
      document.querySelector("body").append(table);
    };
  </script>
</body>
スニペットを展開

| この質問を改善する | |
新しい参加者
SA__091 は新しい参加者です。さらなる説明を求めたりコメントや回答の仕方についてお願いするときは、思いやりを持つよう心がけましょう。 行動規範をどうぞご参照ください。
1

まず、データ上でサンプル1〜3を区別する必要があるので、tableBody のサンプルのclassName に group1 group2 group3 を追加します。

関数sampleTableは初めから実行するようにして、テーブルは最初は隠しておきます。groupN のクラスもデフォルトでは不可視にします。

チェックボックスの値が変化したら、テーブルに groupNshown のクラスを追加して、各グループのセルが見えるようにします。

チェックボックスが変更される度にテーブルを作り直す方法もありますが、一般的に見た目だけの変更はCSSクラス名の変更だけで行ったほうが実行コストが低いです。

あと本質的ではない点:

  • チェックボックに付けるテキストは、<label>で囲みましょう。当たり判定が広くなりユーザが操作しやすくなります。
  • チェックボックスの値が変更されたかどうかは onchange で判定します。onclick は意味的におかしいです。onclickハンドラが呼ばれた後にブラウザがチェック状態を変更するとか、キーボード操作に対応しているように見えないとか。(実際はうまく動きますが)

function updateTableClass(group, checked) {
  const table = document.querySelector('table');
  table.classList.toggle(group + 'shown', checked);
  table.hidden = table.classList.length == 0;
}

function sampleTable() {
  const table = document.createElement("table");
  table.hidden = true;
  const tableBody = {
    rows: [
      [{value: "red"}, {value: "blue"}],
      [{value: "メニュー", rowSpan: 8 }],
      [{value: "サンプル1", className: "up_down_border group1"}],
      [{value: "サンプル1", className: "top_border group1"}],
      [{value: "サンプル2", className: "up_down_border group2"}],
      [{value: "サンプル2", className: "top_border group2"}],
      [{value: "サンプル3", className: "up_down_border group3"}],
      [{value: "サンプル3", className: "up_down_border group3"}],
      [{value: "サンプル3", className: "top_border group3"}],
      [{value: "メニュー", rowSpan: 8}],
      [{value: "サンプル1", className: "up_down_border group1"}],
      [{value: "サンプル1", className: "top_border group1"}],
      [{value: "サンプル2", className: "up_down_border group2"}],
      [{value: "サンプル2", className: "top_border group2"}],
      [{value: "サンプル3", className: "up_down_border group3"}],
      [{value: "サンプル3", className: "up_down_border group3"}],
      [{value: "サンプル3", className: "top_border group3"}],
    ]
  };
  for (var i = 0; i < tableBody.rows.length; i++) {
    const cols = tableBody.rows[i];
    const tr = document.createElement("tr");
    for (var j = 0; j < cols.length; j++) {
      const col = cols[j];
      const td = document.createElement("td");
      td.innerHTML = col.value;
      if (col.className) {
        td.className = col.className;
      }
      if (col.rowSpan >= 0) {
        td.rowSpan = col.rowSpan;
      }
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.querySelector("body").append(table);
};

sampleTable();
td {
  border: solid 1px;            
}
 
table {
  border-collapse:  collapse;     
}

.up_down_border {
  border-top-style: none;
  border-bottom: none;
}

.bottom_border {
  border-bottom: none;
}

.top_border {
  border-top: none;
}

.group1, .group2, .group3 {
  display: none;
}

.group1shown .group1,
.group2shown .group2,
.group3shown .group3 {
  display: table-cell;
}
<body>
  <div>
    <label><input type="checkbox"
    onchange="updateTableClass('group1', this.checked)">1のみ</label>
  </div>
  <div>
    <label><input type="checkbox"
    onchange="updateTableClass('group2', this.checked)">2のみ</label>
  </div>
  <div>
    <label><input type="checkbox"
    onchange="updateTableClass('group3', this.checked)">3のみ</label>
  </div>
</body>
スニペットを展開

| この回答を改善する | |
  • 考え方まで解説してくださってありがとうございます。凄く助かりました。 – SA__091 10時間前

回答

SA__091 は新しい参加者ですので温かく迎えましょう。行動規範 をどうぞご参照ください。

“回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。

求めていた回答ではありませんか？ のタグが付いた他の質問を参照するか、自分で質問をする。