Jquery Filtering Tabelle Ergebnisse auf Datenattribut

Question

Ich habe eine einfache Tabelle, die Datum in Spalten zeigt. Jedes <td> hat ein Datenattribut data-port Ich möchte die Ergebnisse filtern, die in der Tabelle gezeigt werden, die auf einer Auswahl basiert, die von einer Dropdownliste vorgewählt wird.

Die HTML ist:

<select id='filter'> 
<option></option> 
<option value='fd18'>OPTION A</option> 
<option value='af13'>OPTION B</option> 
</select> 

<table id='table1'> 
<tbody> 
<tr> 
    <td data-port="fd18"><div id="123" class="title">123</div></td> 
    <td data-port="af13"><div id="456" class="title">456</div></td> 
    <td data-port="0000"><div id="789" class="title">789</div></td> 
    <td data-port="fd18"><div id="213" class="title">213</div></td> 
</tr> 

<tr> 
    <td data-port="fd18"><div id="345" class="title">345</div></td> 
    <td data-port="af13"><div id="946" class="title">946</div></td> 
    <td data-port="0000"><div id="368" class="title">368</div></td> 
    <td data-port="af13"><div id="246" class="title">246</div></td> 
</tr> 

<tr> 
    <td data-port="af13"><div id="642" class="title">642</div></td> 
    <td data-port="fd18"><div id="759" class="title">795</div></td> 
    <td data-port="fd18"><div id="335" class="title">335</div></td> 
    <td data-port="fd18"><div id="556" class="title">556</div></td> 
</tr> 
</tbody> 
</table> 

mit JQuery Ich versuche, die TDs zu zeigen, wo die Daten-Port die gewählte Option entspricht und den Rest auszublenden. Wie kann ich das tun, und es ist möglich, das Tabellenlayout dynamisch zu aktualisieren, damit ich noch mit ordentlichen Spalten enden kann.

Die jquery Ich benutze ist:

$('#filter').change(function() { 
    var port = $(this).val() 
    console.log(port) 
    $("td > [data-port!=" + port+ "]").hide(); 
    $("td > [data-port=" + port+ "]").show(); 
}); 

Die Konsole den richtigen Wert zurückgegeben zeigt, aber ich am Ende auf der Seite alle TDs versteckt nicht nur diejenigen, die

nicht übereinstimmen

Irgendwelche Ideen, wie ich das machen kann. Dank

Answer 1

Ist das, was Sie suchen:

$('#filter').change(function() { 
 
    var port = $(this).val() 
 
    console.log(port) 
 
    if (port !== '') { 
 
     $("td[data-port!=" + port+ "]").css('visibility', 'hidden'); 
 
     $("td[data-port=" + port+ "]").css('visibility', 'visible'); 
 
    } else { 
 
     $("td").css('visibility', 'visible'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='filter'> 
 
<option value=''></option> 
 
<option value='fd18'>OPTION A</option> 
 
<option value='af13'>OPTION B</option> 
 
</select> 
 

 
<table id='table1'> 
 
<tbody> 
 
<tr> 
 
    <td data-port="fd18"><div id="123" class="title">123</div></td> 
 
    <td data-port="af13"><div id="456" class="title">456</div></td> 
 
    <td data-port="0000"><div id="789" class="title">789</div></td> 
 
    <td data-port="fd18"><div id="213" class="title">213</div></td> 
 
</tr> 
 

 
<tr> 
 
    <td data-port="fd18"><div id="345" class="title">345</div></td> 
 
    <td data-port="af13"><div id="946" class="title">946</div></td> 
 
    <td data-port="0000"><div id="368" class="title">368</div></td> 
 
    <td data-port="af13"><div id="246" class="title">246</div></td> 
 
</tr> 
 

 
<tr> 
 
    <td data-port="af13"><div id="642" class="title">642</div></td> 
 
    <td data-port="fd18"><div id="759" class="title">795</div></td> 
 
    <td data-port="fd18"><div id="335" class="title">335</div></td> 
 
    <td data-port="fd18"><div id="556" class="title">556</div></td> 
 
</tr> 
 
</tbody> 
 
</table>

Sie haben die Pfeil-Zeichen nach dem TD in Ihrem jQuery-Code. Das bedeutet, erstes Kind nach TD, die Daten-Port hat attr. In Ihrem Fall verfügt Ihr TD über den Datenport selbst.