javascriptにおけるtable操作(表示と非表示の切り替えも含む)

#1.はじめに
この記事のキモはselect要素の取得とtable要素の操作

#2.サンプルコード
htmlコード

　　<select id="lng" onchange="change()">
        <option id="select">選択してください</option>
        <option id="jap">日本語</option>
        <option id="eng">English</option>
        <option id="all">全て表示</option>
    </select>
    <table id = "table"> 
        <tr>
            <th>あ</th>
            <td>い</td>
            <td>う</td>
            <td>え</td>
        </tr>
        <tr>
            <th>a</th>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
    </table>

javascriptコード

function change(){
  let ta1 = document.getElementById("lng").value;
  let table = document.getElementById("table");

  var firrow = table.rows[0];
  var secrow = table.rows[1];

  switch(ta1){
    case "日本語":
      firrow.style.display = "block";
      secrow.style.display = "none";
      break; 
    case "English":
      secrow.style.display = "block";
      firrow.style.display = "none";
      break;
    case "全て表示":
      firrow.style.display = "block";
      secrow.style.display = "block";
      break;
  }
}

#3.プロセス
①selectの値を取得

let ta1 = document.getElementById("lng").value;

②tableの値を取得
rows[*]でテーブルの列を取得するのがキモ。
そしてそれを変数に代入する。

let table = document.getElementById("table");

var firrow = table.rows[0];
var secrow = table.rows[1];

③
selectで取得した値をswitchでふるいにかける。
なお、cssを変更してdisplay = "block"で表示して、display = "none"で非表示にするのがキモ。

switch(ta1){
    case "日本語":
      firrow.style.display = "block";
      secrow.style.display = "none";
      break; 
    case "English":
      secrow.style.display = "block";
      firrow.style.display = "none";
      break;
    case "全て表示":
      firrow.style.display = "block";
      secrow.style.display = "block";
      break;
  }

以上。