MENU

JavaScriptでリアルタイム検索をする方法

フォーム内に文字を入力した際にリアルタイムで検索する方法

See the Pen JS_RealTimeSearch by Nishinoya-Code (@nishinoya-code) on CodePen.

コード解説は下記

function searchTable() {
  let input, filter, found, table, tr, td, i, j;
  input = document.getElementById("myInput"); //inputタグのidを定義
  filter = input.value.toUpperCase(); //inputタグの値を大文字化
  table = document.getElementById("myTable"); //tbodyタグのidを定義
  tr = table.getElementsByTagName("tr"); //trタグを定義
  for (i = 0; i < tr.length; i++) { //trタグの数だけループ
      td = tr[i].getElementsByTagName("td"); //tdタグを定義
      for (j = 0; j < td.length; j++) { //tdタグの数だけループ
          if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
            //tdのマークアップを取得して大文字化→inputタグの値を探す
              found = true; //あったらtrueを返す
          }
      }
      if (found) {
          tr[i].style.display = "";//trタグ表示
          found = false;
      } else {
          tr[i].style.display = "none";//trタグ非表示
      }
  }
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる