70793


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

[![画像の説明をここに入力](https://i.stack.imgur.com/LbIdK.png)](https://i.stack.imgur.com/LbIdK.png)

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-09-28T19:32:59.160
70791
2020-09-29T01:41:26.630
41855
question
javascript
テーブルの操作をjavascriptでしたい。


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

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

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

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

あと本質的ではない点:

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

[code]

    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();
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-09-29T01:41:26.630
70793
2020-09-29T01:41:26.630
3475
70791
answer