javascript でテーブルの行の表示と非表示

Question

javascript ほぼ未経験です。
javascript と select タグを使い条件に合うものだけ表示しようとしております
option タグの値と、テーブルの tr タグが同じものを表示し、「全件」を選ぶと value="all" でまた、全件表示できるようにしようとしておりますがうまくいきません
class の指定の仕方が間違っているのでしょうか？　
アドバイスよろしくお願いします

<select id="list" class="container text-center">
  <option value="all">----- 全件 -----</option>
    <option value="books">「ブックス」のみ表示</option>
    <option value="douga">「動画」のみ表示</option>
   　　<option value="game">「ゲーム」のみ表示</option>
</select>
<input onclick="print_row()" type="button" value="表示">

<table id="table">
  <tbody>
    <tr>
      <th>順位</th><th>タイトル</th><th>料金</th><th>メーカー</th>
    </tr>
    <tr　class="books all"></tr>
    <tr class="douga all"></tr>
    <tr class="game all"></tr>
  </tbody>
</table>

function print_row(){
  var List = document.getElementById("list");
  index_num = List.selectedIndex;
  optVal = List.options[index_num].value;

  var Row = document.getElementsByClassName(optVal);
  Row.style.display=(Row.style.display == 'none')?"":"none";
}

Answer 1

  var Row = document.getElementsByClassName(optVal);
  Row.style.display=(Row.style.display == 'none')?"":"none";

getElementsByClassName()の戻り値は Element ではなく HTMLCollection、という問題はさておき、ロジックがおかしいですよね。

• all の場合、すべての tr を表示状態にする
• それ以外の場合、optVal と同じクラスを持っている tr は表示状態、持っていないなら非表示状態にする

ということで、Row.style.display の現在値を調べる必要はないはずです。

どちらの場合でもすべての tr を処理する必要があるので、getElementsByClassName() のパラメータは常に "all" でよいのではないでしょうか。

Comments

[hiro114]

ありがとうございました

Answer 2

ん〜。print_row()をこんなのにしてみるとどう？

function print_row() {
  const clazz = document.getElementById("list").value;  
  document.querySelectorAll('tr').forEach(row => {
    row.style.display = row.classList.contains(clazz) ? '' : 'none';
  });
}

Comments

[hiro114]

これを機に少しずつJSを勉強させていただきます