技術ブログ
JavaScript

【JavaScript】テーブル検索

2024年05月09日
No市区町村コード区名ふりがな英語面積人口
114101鶴見区つるみくtsurumi
214102神奈川区かながわくkanagawa
314103西区にしくnishi
414104中区なかくnaka
514105南区みなみくminami
614106保土ケ谷区ほどがやくhodogaya
714107磯子区いそごくisogo
814108金沢区かなざわくkanazawa
914109港北区こうほくくkohoku
1014110戸塚区とつかくtotsuka
1114111港南区こうなんくkonan
1214112旭区あさひくasahi
1314113緑区みどりくmidori
1414114瀬谷区せやくseya
1514115栄区さかえくsakae
1614116泉区いずみくizumi
1714117青葉区あおばくaoba
1814118都筑区つづきくtsuzuki
<label for="keyword">検索</label>
<input id="keyword" placeholder="キーワード" />
<script>
document.getElementById('keyword').addEventListener('input', function() {
  let keyword = this.value.toLowerCase();
  let table = document.getElementsByTagName('table')[0];
  for (let y = 1; y < table.rows.length; y++) {
    for (let x = 0; x < table.rows[y].cells.length; x++) {
      let target = table.rows[y].cells[x].textContent;
      if (target.indexOf(keyword) < 0) {
        table.rows[y].style.display = 'none';
      } else {
        table.rows[y].style.display = '';
        break;
      }
    }
  }
});
</script>
No数値1数値2文字1文字2大分類小分類
000AあA市A町
101BいA市B町
202CうA市C町
303DえB市A町
404EおB市B町
505FかB市C町
606GきC市A町
707HくC市B町
808IけC市C町
909Jこ
1010Kさ
1111Lし
<script>
function aaa(colIndexes) {
  let keyword = this.value.toLowerCase();
  let table = document.getElementsByTagName('table')[0];
  for (let y = 1; y < table.rows.length; y++) {
    for (let x = 0; x < table.rows[y].cells.length; x++) {
      if (colIndexes.indexOf(x) < 0) {
        continue;
      }
      let target = table.rows[y].cells[x].textContent;
      if (target.indexOf(keyword) > -1) {
        table.rows[y].style.display = 'none';
      } else {
        table.rows[y].style.display = '';
      }
    }
  }
}
</script>

コメント