IT

【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="キーワード"  oninput="search()" />
<script>
function search() {
  let keyword = document.getElementById('keyword').value.toLowerCase();
  let table = document.querySelectorAll('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市区町村コード区名ふりがな英語面積人口
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
<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>

コメント