nur bestimmte Spalte durchsuchen und Groß- und Kleinschreibung

  • JavaScript

Es gibt 9 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    nur bestimmte Spalte durchsuchen und Groß- und Kleinschreibung

    Hallo zusammen mit folgendem Code erscheint mir im Browser (Intranet) eine durchsuchbare Tabelle. Die beiden Suchfelder suchen aktuell aber in der gesamten Tabelle. Bekommt man es ohne weiteres hin, dass jedes Suchfeld nur eine bestimmte Tabelle durchsucht?

    Suchfeld "Mandant" -> Spalte "Mandanten"
    Suchfeld "Filter/Suche" -> Spalte "Tags"

    Ich bitte evtl. schlecht geschriebene Zeilen usw. zu entschuldigen. Ich habe leider so fast garkeine Ahnung von html und habe den aktuellen Stand nur durch viel zusammensuchen und herumprobieren hinbekommen. :)

    Edit: Ich habe noch eine zweite Bitte, aktuell habe ich beim Suchfeld "Filter/Suche" den Hinweis erfasst, dass nur Kleinbuchstaben und Zahlen eingegeben werden sollen, da ich die Schlagwörter alle nur mit Kleinbuchstaben erfasst habe. Wie kann ich das bei der Suchbegriffeingabe egalisieren, also egal ob die Buchstabden klein oder groß geschrieben sind? Bsp.:

    Schlagwort lautet: "walzstahl"
    eingebener Suchbegriff lautet: Walzstahl oder walzstahl oder gar wAlzstahl usw. Der Schalgwort sollte egal mit welcher Schreibweise immer gefunden werden.




    HTML-Quellcode

    1. <title>Lieferantensuche</title>
    2. <style>
    3. table#foobar-table thead {
    4. position: sticky;
    5. }
    6. table#foobar-table thead {
    7. inset-block-start: 0;
    8. }
    9. table#foobar-table,
    10. table#foobar-table > thead > tr > th,
    11. table#foobar-table > tbody > tr > td {
    12. border: Solid 1px #888888;
    13. padding: 5px;
    14. }
    15. table#foobar-table > thead > tr {
    16. background-color: #ED1C29;
    17. }
    18. table#foobar-table > tbody > tr:nth-child(even) {
    19. background-color: #FFFFFF;
    20. }
    21. table#foobar-table > tbody > tr:nth-child(odd) {
    22. background-color: #D5E2E9;
    23. }
    24. #foobar-table { margin-left: 1px; }
    25. }
    26. </style>
    27. <form><p>
    28. <label>Mandant: <input type="search" list="Alle" class="filter-table" data-for="#foobar-table" autofocus="autofocus" placeholder="Klick mich" style="text-transform:uppercase;"><datalist id="Alle"><option value="Bautzen"><option value="Bitterfeld"><option value="Cottbus"><option value="Grimmen"><option value="Hannover"><option value="Riesa"><option value="Seevetal"><option value="Stendal"></datalist></label>
    29. </p>
    30. <p>
    31. <label>Filter/Suche: <input type="search" class="filter-table1" data-for="#foobar-table" autofocus="autofocus" placeholder="Suchbegriff eingeben"> (Nur Kleinbuchstaben und Zahlen)</label>
    32. </p><p><input type='reset' onclick="location.reload()" /></p></form><p>Ein Kreditor oder Suchbegriff fehlt? Dann sende bitte eine E-Mail: <a href="mailto:aaa?Subject=Kreditorenübersicht&body=Hallo Robert, ich bitte um folgende Ergänzung. (Bitte alle nötigen Infos erfassen: Kreditorennummer, Name, Wissenswertes, evtl. Suchbegriffe oder Info, wo die Produkte des Kreditoren zu finden sind, Mandanten)">E-Mail senden</a></p>
    33. <table id="foobar-table">
    34. <thead>
    35. <tr>
    36. <th style='min-width:100px;'>
    37. Kreditorennummer
    38. </th>
    39. <th style='min-width:100px;'>
    40. Name
    41. </th>
    42. <th style='min-width:100px;'>
    43. E-Mail
    44. </th>
    45. <th style='min-width:100px;'>
    46. Wissenswertes
    47. </th>
    48. <th style=min-width:100px; visibility: hidden >
    49. Betrieb
    50. </th>
    51. <th style=min-width:100px; visibility: hidden >
    52. Tags
    53. </th>
    54. <th style=min-width:100px; visibility: hidden >
    55. Mandanten
    56. </th>
    57. </tr>
    58. </thead>
    59. </tbody>
    60. <tr><td> 9096678 </td><td> Salzgitter </td><td>a@muster.de </td><td> </td><td visibility: hidden> SÜD </td><td visibility: hidden> walzstahl, s235, stabstahl, hallo </td><td visibility: hidden> BautzenBitterfeldCottbusRiesa
    61. <tr><td> 9096567 </td><td> Voss </td><td>b@muster.de </td><td> </td><td visibility: hidden> SÜD </td><td visibility: hidden> v2a, edelstahl, v4a, niro, stabstahl, flachstahl, rundstahl </td><td visibility: hidden> BautzenBitterfeldCottbusRiesa
    62. <tr><td> 9077216 </td><td> Später Hamburg </td><td> c@muster.de </td><td> </td><td visibility: hidden> ALLE </td><td visibility: hidden> walzstahl, formstahl, s235, s355, vierkantrohre, hohlprofile </td><td visibility: hidden> StendalGrimmenHannoverSeevetalBautzenBitterfeldCottbusRiesa
    63. <tr><td> 8510340 </td><td> Rime </td><td> info@rime.de </td><td> </td><td visibility: hidden> RI </td><td visibility: hidden> brennzuschnitte, blechzuschnitte, kantteile, s235, v2a, edelstahl, aluminium </td><td visibility: hidden> Riesa
    64. </tbody>
    65. </table>
    66. <script>
    67. // HTML-Tabelle filtern
    68. document.querySelectorAll('.filter-table').forEach(function(input) {
    69. var table = document.querySelector(input.dataset.for);
    70. var rows = table.querySelectorAll('tbody tr');
    71. input.addEventListener('input', function(event) {
    72. rows.forEach(function(tr) {
    73. tr.hidden = !tr.textContent.includes(input.value);
    74. });
    75. });
    76. })
    77. </script>
    78. </tbody>
    79. </table>
    80. <script>
    81. // HTML-Tabelle filtern
    82. document.querySelectorAll('.filter-table1').forEach(function(input) {
    83. var table = document.querySelector(input.dataset.for);
    84. var rows = table.querySelectorAll('tbody tr');
    85. input.addEventListener('input', function(event) {
    86. rows.forEach(function(tr) {
    87. tr.hidden = !tr.textContent.includes(input.value);
    88. });
    89. });
    90. })
    91. </script>

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „robkel“ ()

    @robkel
    Bitte entferne die personenbezogenen Daten aus deinem Quellcode. Ich sehe da diverse Mailadressen.

    Zu deiner Frage: Ich sehe weder die Spalte "Mandanten" noch die Spalte "Tags".
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    *Vollzitat entfernt*

    Vielen Dank für deinen Hinweis, habe ich nicht dran gedacht.

    In Zeile 52+55 stehen die beiden "Spaltenköpfe". Aber wahrscheinlich habe ich es nichtmal richtig als Tabelle "formatiert", sondern nur optisch!? Wie gesagt, html ist komplettes Neuland für mich.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Ah, da! Ich hatte nur die sichtbaren Spalten beachtet.

    Um deine gewünschten Änderungen zu erreichen, mache dies:

    Zeile 70:

    JavaScript-Quellcode

    1. var rows = table.querySelectorAll('tbody tr td:nth-last-child(1)');

    Zeile 84:

    JavaScript-Quellcode

    1. var rows = table.querySelectorAll('tbody tr td:nth-last-child(2)');

    Zeile 73 und 87:

    JavaScript-Quellcode

    1. tr.parentElement.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());

    EDIT: Ist damit übrigens eine Javascript-Frage, habe daher das Label des Threads geändert.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Und nochmal Danke! Klappt wunderbar. Ein Problem habe ich noch, ist mir vorher nur garnicht aufgefallen. Die beiden Suchfelder sollten in "Kette" agieren. Also wenn ich einen "Mandanten" auswähle, dann sollen nach Eingabe des Suchbegriffes auch nur Treffer zu diesem Mandanten angezeigt werden. Aktuell wird quasi immer nur die letzte Eingabe berücksichtigt.
    In Zeile 31 filter-table1 durch filter-table ersetzen, in 28 und 31 nach data-for="#foobar-table" data-nr="1" bzw. data-nr="2" schreiben, Zeilen 66–77 entfernen und 81–90 austauschen durch:

    JavaScript-Quellcode

    1. // HTML-Tabelle filtern
    2. document.querySelectorAll('.filter-table').forEach(function(input) {
    3. var table = document.querySelector(input.dataset.for);
    4. var rows1 = table.querySelectorAll('tbody tr td:nth-last-child(1)'); // Mandant
    5. var rows2 = table.querySelectorAll('tbody tr td:nth-last-child(2)'); // Tags
    6. input.addEventListener('input', function(event) {
    7. if (input.dataset.nr == '1') rows1.forEach(function(td) {
    8. td.parentElement.hidden = !td.textContent.toLowerCase().includes(input.value.toLowerCase());
    9. });
    10. if (input.dataset.nr == '2') rows2.forEach(function(td) {
    11. td.parentElement.hidden = td.parentElement.hidden || !td.textContent.toLowerCase().includes(input.value.toLowerCase());
    12. });
    13. });
    14. })

    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Wow, vielen Dank für die schnelle und unkomplizierte Hilfe. Klappt wunderbar. Leider tut sich aktuell das näcshte Problem auf, bei dem ich nicht weiterkomme. Die Eingabe der Suchbegriffe läuft noch nicht so, wie ich es mir wünsche. Ich hätte gern eine Echtzeitsuche bzw. "On-Click" Suche für beide Suchfelder. Also Filterung während der EIngabe aber eben auch während einer Löschung, wenn man sich vertippt hat. Aktuell muss ich immer auf zurücksetzen klicken, damit ich "von vorn" anfangen kann mit der Suche.

    Quasi so wie hier: de.acervolima.com/wie-fuhrt-ma…iltert-eine-html-tabelle/ nur bekomme ich das nicht eingebaut in den vorhandenen Code.
    Eigentlich hätte input auch schon das gewünschte bewirken müssen. Aber vielleicht findest du hier noch ein passenderes Event: w3schools.com/jsref/dom_obj_event.asp
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum