フォーム内に文字を入力した際にリアルタイムで検索する方法
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タグ非表示
}
}
}
コメント