JQuery-Änderung an der Tabellensuche

Question

Ich habe derzeit JQuery-Code, um eine Tabelle in der ersten Spalte zu suchen und nach Zeilen zu sortieren. Es enthält jedoch zusätzliche Notizinformationen, die von der Suche ausgeschlossen werden sollen, sodass die Suche nur auf Systemnamensinformationen beschränkt ist.

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"; 
     } 
    } 
    } 
} 

Dies ist eine Beispiel Reihe von HTML-Tabelle, die gesucht wird:

 <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> 

Gibt es einen guten Weg, um den jQuery-Code zum Ausschluß der tablenote Informationen von der Suche, wie ohne dass tablenote Klasse zu ändern oder kleinen Text ausschließen?

Answer 1

Sie können mit jQuery .filter() (zusammen mit dem :contains Selektor) Ergebnisse filtern, die .tablenote innerhalb allen anderen Elementen mit der Klasse sind. Der Tastencode wäre so etwas wie:

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); 

So im Wesentlichen das sagt „mir sagen, ob diese Zeile des Eingabetext enthält, aber nicht, wenn es in einem .tablenote Elemente ist

meine JSFiddle here Siehe

..

Hinweis: Wenn Sie jedoch die Kontrolle über das Markup an erster Stelle haben, wäre es besser, eine Klasse zum Systemnamen-Anker hinzuzufügen (wie <a href="..." class="system-name">System Name</a>) und dann gezielt auf $row.find('.system-name'). Oder besser noch, es wäre besser, den Systemnamenanker mit einem Datenattribut zu markieren, wie zum Beispiel: <a href="..." data-system-name>System Name</a> und dann können Sie es wie folgt zielen: $row.find('[data-system-name]').