Verwenden Sie Javascript, um HTML-Tabelle zu durchsuchen und behalten Sie die komplette Tabellenzeile, wo Übereinstimmungen gefunden werden, und entfernen Sie den Rest

Extrem neu in Javascript, etwas neu in HTML, so dass jede Hilfe groß ist.Verwenden Sie Javascript, um HTML-Tabelle zu durchsuchen und behalten Sie die komplette Tabellenzeile, wo Übereinstimmungen gefunden werden, und entfernen Sie den Rest

Ich habe eine HTML-Tabelle, die ich erstellt habe und möchte ein JavaScript-Skript daran binden, das würde ich in meinem Suchfeld suchen, und alle nicht übereinstimmenden Einträge würden verschwinden und Übereinstimmungen würden auf dem Bildschirm mit dem gesamten bleiben Zeile zeigt. Ich habe es derzeit, damit ich nach einem Schlüsselwort suchen kann, aber nur das Wort erscheint und alles andere verschwindet, was jedes gefundene Schlüsselwort in die erste Spalte zurückbringt.

<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="js-search.js"></script> 
</head> 

<style type="text/css"> table { 
font-size: 12px; 
border: 1px solid #CCC; 
font-family: Arial, Helvetica, sans-serif; 
} 
table td { 
padding: 4px; 
margin: 3px; 
border: 1px solid #CCC; 
} 
table th { 
background-color: #104E8B; 
color: #FFF; 
font-weight: bold; 
} 
</style> 
<body> 
<input type="text" id="search" placeholder="Type to search"> 
<table id="table"> 

    <table class="searchable"> 
    <thead> 
     <tr> 
    <th>High-Level Category</th> 
    <th>Device Type</th> 
    <th>Hostname</th> 
    <th>IP Address</th> 
    <th>Owner</th> 
    <th>Organizational Unit</th> 
    <th>Organizational Unit Email</th> 
    <th>Universal Forwarder or Syslog?</th> 
    <th>In PCI?</th> 
    <th>Notes:</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Security Device</td> 
    <td>Firewall</td> 
    <td>ITFirewall1</td> 
    <td>1.1.1.1</td> 
    <td>User1</td> 
    <td>Information Technology</td> 
    <td>[email protected]</td> 
    <td>Syslog</td> 
    <td>Yes</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Security Device</td> 
    <td>Firewall</td> 
    <td>ITFirewall2</td> 
    <td>2.2.2.2</td> 
    <td>User2</td> 
    <td>Program Development</td> 
    <td>[email protected]</td> 
    <td>Syslog</td> 
    <td>No</td> 
    <td>&nbsp;</td> 
    </tr>

Das ist meine Tabelle, die auf jquery und meine durchsuchbare Javascript-Datei zeigt. Folgendes habe ich für mein Javascript, das die Suche ausführt:

$(document).ready(function(){ 

var $rows = $('table td'); 
$('#search').keyup(function() { 

var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
    reg = RegExp(val, 'i'), 
    text; 

$rows.show().filter(function() { 
    text = $(this).text().replace(/\s+/g, ' '); 
    return !reg.test(text); 
}).hide(); 
}); 

});

Irgendwelche Ideen, was ich falsch mache? Alle Hilfe wäre willkommen.

Danke!

Quelle

2016-07-11 Zach

Sie sind ganz in der Nähe, ändern Sie einfach den Code var $rows = $('table td');-var $rows = $('table tr'); diese Arbeit zu machen. Und im Idealfall sollten Sie immer den Tabellenkopf anzeigen. Dafür können Sie var $rows = $('table tr:has(td)');

Quelle

2016-07-11 23:21:30

Wow, es funktioniert! Lol. Wenn ich jedoch nach etwas suche, verschwindet mein Header. Irgendwelche Gedanken, wie man das auch nach einer Suche behält? Ich danke dir sehr! – Zach

Verwenden Sie '$ ('table tr: gt (0)')' so dass die Kopfzeile nicht eingeschlossen ist. Oder geben Sie Ihren Datenzeilen eine Klasse und verwenden Sie '$ ('table tr.dataclass')'. – Barmar

@Zach Froh, dass es geholfen hat. Wenn diese Antwort oder eine andere Lösung Ihr Problem behoben hat, markieren Sie diese als akzeptiert. –

Bei Verwendung eines Plugin eine Option, ich schlage vor, mit Datatables Sie das Rad nicht neu erfinden :)

Hier ist ein Beispiel dafür, wie die Suche funktioniert: https://datatables.net/examples/basic_init/zero_configuration.html

Quelle

2016-07-11 23:10:10

Wow, wie habe ich das nicht durch meine Google-Abenteuer gesehen ?! Das ist großartig! Ich muss das umsetzen. Danke! – Zach

Dies ist absolut das beste Plugin für jede Art von Tabellen, Es hat so viele Funktionen und Plugins, das grundlegende Setup ist ziemlich einfach. Werfen Sie einen Blick auf ihre Dokumentation, sie haben eine Menge Beispiele. Und akzeptiere diese Antwort, wenn es das tut, was du verlangst :) –

.hide() entspricht css display:none (im Gegensatz zu visibility:hidden) - das versteckte Element belegt keinen Platz, also alles andere bewegt sich. In diesem Codeabschnitt habe ich .hide durch .css("opacity","0.1") ersetzt. Ich denke, das ist es, was Sie erreichen wollten.

$(document).ready(function(){ 
 

 
var $rows = $('table tr'); 
 
$('#search').keyup(function() { 
 

 
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
 
    reg = RegExp(val, 'i'), 
 
    text; 
 

 
$rows.css("opacity","1").filter(function() { 
 
    text = $(this).text().replace(/\s+/g, ' '); 
 
    return !reg.test(text); 
 
}).css("opacity","0.1"); 
 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script type="text/javascript" src="js-search.js"></script> 
 
</head> 
 

 
<style type="text/css"> table { 
 
font-size: 12px; 
 
border: 1px solid #CCC; 
 
font-family: Arial, Helvetica, sans-serif; 
 
} 
 
table td { 
 
padding: 4px; 
 
margin: 3px; 
 
border: 1px solid #CCC; 
 
} 
 
table th { 
 
background-color: #104E8B; 
 
color: #FFF; 
 
font-weight: bold; 
 
} 
 
</style> 
 
<body> 
 
<input type="text" id="search" placeholder="Type to search"> 
 
<table id="table"> 
 

 
    <table class="searchable"> 
 
    <thead> 
 
     <tr> 
 
    <th>High-Level Category</th> 
 
    <th>Device Type</th> 
 
    <th>Hostname</th> 
 
    <th>IP Address</th> 
 
    <th>Owner</th> 
 
    <th>Organizational Unit</th> 
 
    <th>Organizational Unit Email</th> 
 
    <th>Universal Forwarder or Syslog?</th> 
 
    <th>In PCI?</th> 
 
    <th>Notes:</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>Security Device</td> 
 
    <td>Firewall</td> 
 
    <td>ITFirewall1</td> 
 
    <td>1.1.1.1</td> 
 
    <td>User1</td> 
 
    <td>Information Technology</td> 
 
    <td>[email protected]</td> 
 
    <td>Syslog</td> 
 
    <td>Yes</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Security Device</td> 
 
    <td>Firewall</td> 
 
    <td>ITFirewall2</td> 
 
    <td>2.2.2.2</td> 
 
    <td>User2</td> 
 
    <td>Program Development</td> 
 
    <td>[email protected]</td> 
 
    <td>Syslog</td> 
 
    <td>No</td> 
 
    <td>&nbsp;</td> 
 
    </tr>

Quelle

2016-07-11 23:20:54 grateful

Das ist wirklich nah dran. Ich habe tatsächlich versucht, die gesamte Zeile sichtbar zu machen, zum Beispiel, wenn ich nach 1.1.1.1 suchen würde, würde ich diese ganze Zeile sehen, und die andere Zeile würde verschwinden/verschwinden. Danke für die Information! Hier viel lernen. – Zach

Ich änderte das Snippet, als ich Hectors Post unten bemerkte, dass ich nicht die ganze Reihe Sichtbarkeit fixiert hatte. – grateful

Verwenden Sie Javascript, um HTML-Tabelle zu durchsuchen und behalten Sie die komplette Tabellenzeile, wo Übereinstimmungen gefunden werden, und entfernen Sie den Rest

Antwort

Verwandte Themen