mehrere Filterkriterien in html-Tabelle

  • HTML

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von INOPIAE.

    mehrere Filterkriterien in html-Tabelle

    Ich habe bisher folgenden Html-Code erstellt, der mir eine HTML mit einer Tabelle ausspuckt, in der ich nach Namen suchen kann:

    HTML-Quellcode

    1. <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suche nach Namen">
    2. <table id="myTable">
    3. <tr class="header">
    4. <th style="width:40%;">Name</th>
    5. <th style="width:30%;">Land</th>
    6. <th style="width:30%;">Land</th>
    7. </tr>
    8. <tr>
    9. <td>Alf</td>
    10. <td>Deutschland, Norwegen</td>
    11. <td>E-Mail: alf@muster.de</td>
    12. </tr>
    13. <tr>
    14. <td>Alf</td>
    15. <td>Schweden, Norwegen</td>
    16. <td>E-Mail: alf2@muster.de</td>
    17. </tr>
    18. <tr>
    19. <td>Bob</td>
    20. <td>Schweden, Dänemark</td>
    21. <td>E-Mail: bob@muster.de</td>
    22. </tr>
    23. <tr>
    24. <td>Bob</td>
    25. <td>Deutschland, Norwegen</td>
    26. <td>E-Mail: bob2@muster.de</td>
    27. </tr>
    28. </table>
    29. <style>
    30. #myInput {
    31. background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    32. background-position: 10px 12px; /* Position the search icon */
    33. background-repeat: no-repeat; /* Do not repeat the icon image */
    34. width: 100%; /* Full-width */
    35. font-size: 16px; /* Increase font-size */
    36. padding: 12px 20px 12px 40px; /* Add some padding */
    37. border: 1px solid #ddd; /* Add a grey border */
    38. margin-bottom: 12px; /* Add some space below the input */
    39. }
    40. #myTable {
    41. border-collapse: collapse; /* Collapse borders */
    42. width: 100%; /* Full-width */
    43. border: 1px solid #ddd; /* Add a grey border */
    44. font-size: 18px; /* Increase font-size */
    45. }
    46. #myTable th, #myTable td {
    47. text-align: left; /* Left-align text */
    48. padding: 12px; /* Add padding */
    49. }
    50. #myTable tr {
    51. /* Add a bottom border to all table rows */
    52. border-bottom: 1px solid #ddd;
    53. }
    54. #myTable tr.header, #myTable tr:hover {
    55. /* Add a grey background color to the table header and on hover */
    56. background-color: #f1f1f1;
    57. }
    58. </style>
    59. <script>
    60. function myFunction() {
    61. // Declare variables
    62. var input, filter, table, tr, td, i, txtValue;
    63. input = document.getElementById("myInput");
    64. filter = input.value.toUpperCase();
    65. table = document.getElementById("myTable");
    66. tr = table.getElementsByTagName("tr");
    67. // Loop through all table rows, and hide those who don't match the search query
    68. for (i = 0; i < tr.length; i++) {
    69. td = tr[i].getElementsByTagName("td")[0];
    70. if (td) {
    71. txtValue = td.textContent || td.innerText;
    72. if (txtValue.toUpperCase().indexOf(filter) > -1) {
    73. tr[i].style.display = "";
    74. } else {
    75. tr[i].style.display = "none";
    76. }
    77. }
    78. }
    79. }
    80. </script>


    Nun möchte ich aber gern noch 2 weitere Suchfelder integrieren:

    1. 1.Land
    2. Optional: 2.Land

    Ziel soll es sein, dass ich z.B. nach einem Bob filtern kann, der sowohl in Deutschlan, als auch in Norwegen war. Kann mir jemand helfen? Den oben aufgeführten Code habe ich mir aus fertigen Codes aus dem ww zurecht gebastelt, da ich leider keine Kenntnisse in html/css/javascript usw. habe. Heißt also, dass ich mit Hinweisen nicht zurecht komme, sondern einen fertigen Code bzw. Codehäppchen benötige. Vielleicht wäre jemand so lieb.
    Wo kommen denn die Daten für die Tabelle her?

    Wäre es nicht sinnvoller die Filterkriterien per POST zu übergeben, im Backend die Daten entsprechend zu Filtern und dass Ergebnis zurückzugeben
    NB. Es ist doch schön, wenn man lesbare Namen vergibt. Siehe auch [VB.NET] Beispiele für guten und schlechten Code (Stil).
    Wo soll ich da anfangen?

    HTML ist eine zustandlose Sprache, die eigentlich nur dazu gedacht ist Daten darzustellen.
    Alle Dynamik muss der Page erst beigebracht werden. Dies kann entweder mit JavaScript auf der Clientseite (sprich im Browser) und dann eher mit JSON-Daten umgesetzt werden. Alternativ kann das Ganze auf dem Backend (sprich Webserver) passieren. Dazu werden die benötigten Variablen entweder mit dem GET oder POST Befehl übergeben, wobei der POST-Befehl vorzuziehen ist.
    NB. Es ist doch schön, wenn man lesbare Namen vergibt. Siehe auch [VB.NET] Beispiele für guten und schlechten Code (Stil).