Javascript：テーブル行をセレクトボックスでフィルターしたい。

Question

Symfony環境にて、HPを作っています。
画面上の一覧表でセレクトボックスを選ぶと選択した項目に該当する行以外が見えなくなる機能をjavascriptで実現したいと思っています。
しかしJavascriptのエラーが出てしまい、何か選択すると全行消えてしまいます。
console.logで変数の中身など調べたところ「table.rows[i].cells[5].firstChild.innerText」でうまく値を取得できていませんでした。
色々試してみたのですが解決策が見いだせません。

<td>の中身はsymfonyのcontrollerで生成した変数を入れ込んでいます。 当方、素人レベルなので説明が上手くなく恐縮なのですが、なにかアドバイスをいただけると助かります。 ``` ▼View▼ <div> <select id="types" onChange="searchTable();" > <option value=""></option> <option value="" selected="">選択してください</option> 　{% for p in paginationModal %} <option value="{{ p.name }}" >{{ p.name }}</option> 　{% endfor %} </select> </div> <table id="result"> <thead> <tr> <th>ID</th> <th>名称</th> <th>品番</th> <th>型番</th> <th>JAN</th> <th>メーカー</th> </tr> </thead> <tbody> {% for p in paginationModal %} <tr> <td> <div> {{ p.id }} </div> </td> 　　　　<td> <div> {{ p.name }} </div> </td> <td> <div> {{ p.partNumber }} </div> </td> <td> <div> {{ p.modelNumber }} </div> </td> <td> <div> {{ p.jan }} </div> </td> <td> <div> {{ p.maker }} </div> </td> </tr> {% endfor %} </tbody> ``` ``` ▼Javascript▼ <script type="text/javascript"> function searchTable(){ var selectedType = document.getElementById("types").value; var table = document.getElementById('result'); for( i = 1; i < table.rows.length; i++ ){ if( selectedType === '' || selectedType === table.rows[i].cells[5].firstChild.innerText ){ table.rows[i].style.display = ''; }else{ table.rows[i].style.display = 'none'; } } } </script> ```

Answer 1

これ、落とし穴なんですけど、

table.rows[i].cells[5]がどこかというと、ここですが、

        <td>
           <div>
              {{ p.maker }}
           </div>
        </td>

ここの firstChild は何かというと、

これ。この空白文字であるtextNodeなんです。textNodeにはinnerHTML属性は無いので、table.rows[i].cells[5].firstChild.innerText は必ず undefined になってしまうわけです。

Node.firstChild

ですから、例えば

        <td><div>{{ p.maker }}</div></td>

こうして、<td /> の最初の要素を <div /> になるようにすると、ちゃんと動作します。

でも、HTMLが見にくくなるので、こうします。

table.rows[i].cells[5].firstElementChild.innerText

firstElementChild はtextNodeを含まないので、<div /> が取得できるようになります。

Element.firstElementChild - 最初の子要素を取得する

####追記

で、例によって table.rows[i].cells[5].firstElementChild.innerText は空白文字もごっそり含みますので、比較する場合は

table.rows[i].cells[5].firstElementChild.innerText.trim()

にしてやる必要がありますね。

Comments

[jojo003]

教えていただいた内容で試してみたらちゃんと動きました！！ありがとうございます。
空白を見ていたとは…
ちゃんと基本を勉強します。
大変助かりました！！！