技術ブログ

【JavaScript】テーブル検索

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大分類小分類
000AA市A町
101BA市B町
202CA市C町
303DB市A町
404EB市B町
505FB市C町
606GC市A町
707HC市B町
808IC市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>

コメント