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.
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
- <title>Lieferantensuche</title>
- <style>
- table#foobar-table thead {
- position: sticky;
- }
- table#foobar-table thead {
- inset-block-start: 0;
- }
- table#foobar-table,
- table#foobar-table > thead > tr > th,
- table#foobar-table > tbody > tr > td {
- border: Solid 1px #888888;
- padding: 5px;
- }
- table#foobar-table > thead > tr {
- background-color: #ED1C29;
- }
- table#foobar-table > tbody > tr:nth-child(even) {
- background-color: #FFFFFF;
- }
- table#foobar-table > tbody > tr:nth-child(odd) {
- background-color: #D5E2E9;
- }
- #foobar-table { margin-left: 1px; }
- }
- </style>
- <form><p>
- <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>
- </p>
- <p>
- <label>Filter/Suche: <input type="search" class="filter-table1" data-for="#foobar-table" autofocus="autofocus" placeholder="Suchbegriff eingeben"> (Nur Kleinbuchstaben und Zahlen)</label>
- </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>
- <table id="foobar-table">
- <thead>
- <tr>
- <th style='min-width:100px;'>
- Kreditorennummer
- </th>
- <th style='min-width:100px;'>
- Name
- </th>
- <th style='min-width:100px;'>
- </th>
- <th style='min-width:100px;'>
- Wissenswertes
- </th>
- <th style=min-width:100px; visibility: hidden >
- Betrieb
- </th>
- <th style=min-width:100px; visibility: hidden >
- Tags
- </th>
- <th style=min-width:100px; visibility: hidden >
- Mandanten
- </th>
- </tr>
- </thead>
- </tbody>
- <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
- <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
- <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
- <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
- </tbody>
- </table>
- <script>
- // HTML-Tabelle filtern
- document.querySelectorAll('.filter-table').forEach(function(input) {
- var table = document.querySelector(input.dataset.for);
- var rows = table.querySelectorAll('tbody tr');
- input.addEventListener('input', function(event) {
- rows.forEach(function(tr) {
- tr.hidden = !tr.textContent.includes(input.value);
- });
- });
- })
- </script>
- </tbody>
- </table>
- <script>
- // HTML-Tabelle filtern
- document.querySelectorAll('.filter-table1').forEach(function(input) {
- var table = document.querySelector(input.dataset.for);
- var rows = table.querySelectorAll('tbody tr');
- input.addEventListener('input', function(event) {
- rows.forEach(function(tr) {
- tr.hidden = !tr.textContent.includes(input.value);
- });
- });
- })
- </script>
Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „robkel“ ()