テーブル検索へのJQueryの変更

Question

現在、最初の列のテーブルを検索して行ごとに並べ替えるJQueryコードがあります。ただし、検索から除外したい追加のメモ情報が含まれているため、検索はシステム名情報にのみ制限されます。

SearchFilter.customfilter = function(searchInput, table) { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById(searchInput); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById(table); 
    tr = table.getElementsByTagName("tr"); 
    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerText.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
} 

これが検索されているHTMLテーブルのサンプル行です：

 <tr> 
     <td><a href="site.html">System Name</a> 
      <p class="tablenote"><small>Note: System note information. </small></p> 
     </td> 
     <td>N/A</td> 
     <td>N/A</td> 
     </tr> 

はそのtablenoteクラスを除くなどの検索からtablenote情報を除外するためにjqueryのコードを変更するための良い方法はあります小さなテキストを除外するか？

Answer 1

あなたはクラス.tablenoteを持つ任意の要素の内側にある結果をフィルタリングする（:containsセレクタと一緒に）jQueryの.filter()使用することができます。

var inputText = "Joel"; 

var $matches = $('.row').find(':contains(' + inputText + ')').filter(function(){ 
    // only include matches that are *not* inside an .info element 
    return $(this).closest('.tablenote').length == 0; 
}); 

var rowContainsInput = ($matches.length > 0); 

だから、基本的にこの行が入力されたテキストが含まれている場合を教えてください」と言っていますが、それは.tablenote要素内かどうは

は私JSFiddle hereをが表示されない

：キーコードのようなものは次のようになり。

注：最初にマークアップを制御している場合は、システム名アンカー（<a href="..." class="system-name">System Name</a>など）にクラスを追加してから、具体的にはをターゲットにする方がよいでしょう。。それとも、システム名のアンカーに<a href="..." data-system-name>System Name</a>のようなデータ属性を設定してから、$row.find('[data-system-name]')のようにターゲットを設定する方が良いでしょう。