Javascript：テキストボッスでTableを検索したい

プログラミング超初心者です。
ブラウザ上のTableに対して、テキストボックスに入力したキーワードに合致するセルの含まれた行のみを表示したいと考えています。
具体的には以下のような表からJavascriptで操作できればと思っています。
WEB検索するとJQueryを使った方法はいくつか出てきたのですが
javascriptのみで実現する方法は無いでしょうか。。
---サンプルHTML---

<form>
  <input type="text" name="query" id="search" value="">
  <input type="button" onclick="searchTable();" value="Search">
 </form>
<table id="demo">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>111</td><td>112</td><td>113</td>
      </tr>
  <tr>
        <td>222</td><td>222</td><td>223</td>
      </tr>
  <tr>
        <td>331</td><td>332</td><td>333</td>
      </tr>
    </tbody>
  </table>

----悩んで書いたJavascript-----

function searchTable(){
  var textBox = document.getElementById('search').value;
  var table = document.getElementById('demo');
  for( i = 1; i < table.rows.length; i++ ){
    var row = table.rows[i];
    for (var j = 0; j < table.rows[i].cells.length; j++ ) { 
      var cells = table.rows[i].cells[j]
    if( textBox == '' || textBox == cells.innerHTML ){　。。。？？

初心者質問で見当違いな点がございましたらすみません。
教えていただけると幸いです。

kei344

2018/03/24 10:06

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

たとえばこんな

CSS
1tbody>tr{
2	display: none;
3}
4tbody>tr.selected{
5	display: table-row;
6}

JavaScript
1//スクリプトをストリクトモードで実行(変数の宣言忘れなどを防止できる)
2"use strict";
3//ブロックスコープで囲い, 変数を局所化する
4{
5	//都度テーブルを読み込むのは処理速度的に不利なため, 
6	//予め必要となる要素（行とセル）をリストアップしておく
7	//NOTE:demo.querySelectorAllメソッドはHTMLCollectionを返す
8	//これはArrayに似て非なるもので使い勝手が悪い.
9	//そのため, [].slice.callを被せて本物のArrayに変換している.
10	const rows = [].slice.call(demo.querySelectorAll("tbody tr"));
11	const cells = [].slice.call(demo.querySelectorAll("tbody td"));
12	//ボタンクリック時に呼び出される関数はブロックスコープ外に公開する必要があるため,
13	//varで宣言する.
14	var searchTable = e => {//アロー関数
15		//検索条件を入手する
16		const cond = search.value;
17		//まず, 前回の検索結果を削除
18		rows.forEach(row => row.classList.remove("selected"));
19		//セル毎に中身の文字列が検索条件を含んでいるかを判定し,
20		//含んでいたらそのセルから見て一番近いtr要素にselectedクラスを付与
21		//含んでいなかったらなにもしない(null)
22		//NOTE:三項演算子はif文で書いても同じです.
23		cells.forEach(cell => 
24			cell.textContent.indexOf(cond) >= 0 
25			? cell.closest("tr").classList.add("selected") : null
26		);
27	}
28}

投稿2018/03/24 09:48

編集2018/03/24 12:38

defghi1977

総合スコア4756

jojo003

2018/03/24 12:27

defghi1977さま、早速回答いただいてありがとうございます！ちゃんと動作しました。感謝です。教えていただいたコードを理解するまで３時間くらいかかってしまいました...^^;; 以下の内容で解釈したのですが合っておりますでしょうか。それと「 e =>」という記述が何を意味しているのか、よくわかりませんでした。 ``` /*Table内のCSSのセレクタが"tbody","tr"の要素のリストを取り出す⇒ 空の配列を生成⇒リストの項目を空の配列に入れ込んでいる。*/ const rows = [].slice.call(demo.querySelectorAll("tbody tr")); const cells = [].slice.call(demo.querySelectorAll("tbody td")); 　　　//e=>??? var searchTable = e => { //テキストボックスの内容を変数condとする const cond = search.value; //関数を配列の各要素に対して一度ずつ実行し、rowのクラスから"selected"を削除する。 rows.forEach(row => row.classList.remove("selected")); //セル内のテキスト内容を取得しテキストボックスの内容が含まれるかどうかを調べる。 //含まれる場合、最も近いtr要素に対してselectedクラスを加える。 cells.forEach(cell => cell.textContent.indexOf(cond) >= 0 ? cell.closest("tr").classList.add("selected") : null ); } console.log(rows); ``` お時間あればe=>について教えていただけると幸いです。質問は解決しましたのでベストアンサーにさせていただきます。ありがとうございました！！