Ruby on Rails - JavaScriptのテーブルフィルタリングが機能しない

Question

私は奇妙な問題があります。私のフィルタリングテーブルは正常に動作しません。ここで選択値が変更された瞬間に起動されるJavaScript関数です。

function filterTable(opt, coln, tbId){ 
    var filter = opt.value.toLowerCase(), 
     table = document.getElementById(tbId), 
     trs = table.getElementsByTagName("TR"), 
     col = table.querySelector('th[title='+coln+']').cellIndex, 
     x; 
    for (var i = 1; i < trs.length; i++){ 
     x = trs[i].getElementsByTagName("TD")[col]; 
     if(x){ 
     classes = trs[i].classList; 
     classes.remove(coln+'-filtered-active'); 
     classes.remove(coln+'-filtered-hidden'); 
     if(filter){ 
      console.log('tekst:' + x.textContent.length + ' ' + x.textContent +' || filter:' + filter); 
     if (x.textContent.toLowerCase() == filter) { 
      classes.add(coln+'-filtered-active'); 
     } 
     else { 
      classes.add(coln+'-filtered-hidden'); 
     } 
      } 
      trs[i].style.display = ""; 
     for(var k=0; k < classes.length; k++){ 
      if(classes[k].includes('filtered-hidden')) { 
      trs[i].style.display = "none"; 
      break; 
      } 
     } 
     } 
    } 
    } 

ここでは並べ替えたい列に属するセルの1つを含むhtml構造（htmlで作業しています）がレンダリングされます。

<td> 
    <div class="cardLabel feature">feature</div> 
</td> 

x.textContentは、機能だけでなく、55文字の改行と空白も返します。それが私のフィルタリング方法がうまくいかない理由だと私は信じています。しかし、私はビューにデータを取得する方法の方法ですどのようにこのproblem.Thisを解決するためには考えている：

 <tbody> 
       <% @cards.each do |card| %> 
       <tr> 
        <td> 
        <%= card[:card_name].truncate(50) %>       
        </td> 
        <td> 
        <div class="cardLabel <%= card[:label_name].gsub(/\s+/, "").downcase %>"><%=card[:label_name].upcase %></div> 
        </td> 
        <td><%= card[:time_from]+'-'+card[:time_to]+'h' %></td> 
        <td><%= card[:list_name] %></td> 
        <td><%= card[:organization_name] %></td> 
        <td><%= card[:board_name] %></td> 
       </tr> 
       <% end %> 
      </tbody> 

Answer 1

はinnerTextを試してみてください。投稿したコードinnerTextとtextContentは同じである必要があります。しかし、私はあなたが表示されていない他の要素を追加しますが、xの要素のトリム（）を呼び出すことによって解決されたtextContent

https://jsfiddle.net/msyLm8u2/