Tabellen-Elemente basierend auf exaktem Inhalt entfernen, aber ohne Sonderzeichen zu berücksichtigen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

ldb

Mitglied
3 Dezember 2012
149
0
16
Hallo zusammen

Ich habe eine HTML-Tabelle, die etwas vereinfacht wie folgt aufgebaut ist:
Code:
<table id="dbem-bookings-table">
<thead></thead>
<tbody>
<tr>
<td><a href="#">Kurs 8 Bogenschiessen  - Teil 1</a></td>
<td>Freitag, 1. September 2017</td>
<td>Max Muster</td>
</tr>

<tr>
<td><a href="#">Kurs 1 - Testkurs</a></td>
<td>Donnerstag, 29. September 2017</td>
<td>Hugo Muster</td>
</tr>
</tbody>                    
</table>
Zusätzlich kann ich in meinem Dokument mit einem durch das CMS vorgegebenen Shortcode einen Kurstitel ausgeben lassen, in meinem Beispiel:

Code:
<span id="kurstitel">Kurs 1 – Testkurs</span>
Mit JQuery möchte ich nur diejenigen Zeilen in der Tabelle anzeigen lassen, die mit dem Inhalt des divs "#kurstitel" übereinstimmen. Der aktuelle Code sieht so aus:

Code:
$("#dbem-bookings-table tbody tr:not(:contains('Kurs 1 - Testkurs'))").remove();
Das Filtern funktioniert soweit auch einwandfrei. Mein Problem ist aber folgendes: Das CMS gibt leider den Kurstitel im div "#kurstitel" mit einem langen Geviertstrich (–) aus, den Titel in der Tabelle aber mit einem kurzen (-). Sobald ich also den JQuery-Code dahingehend anpasse, dass der Inhalt des spans als Selektor verwendet wird, funktioniert mein Code nicht mehr:

Code:
var variable = $("#kurstitel" ).text();
$("#dbem-bookings-table tbody tr:not(:contains('" + variable + "'))").remove();
Ich müsste also in meinem Filter-Code noch zusätzlich alle Sonderzeichen im Vornherein ausschliessen. Wichtig sind einzig und allein Zahlen und Buchstaben, der ganze Rest kann vernachlässigt werden. Die Strings sollten aber ansonsten beim Filtern identisch sein, weil später auch andere Listenelemente mit z.B. dem Wort "Testkurs" auftauchen können. Weil ich leider in JQuery und JavaScript noch immer Anfänger bin, wäre ich hierbei froh um jede Hilfe!

Herzlichen Dank und liebe Grüsse
Lukas
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Eine Lösung: Temporäre Strings erzeugen, in den alles was keine Ziffer und kein Buchstabe ist, gelöscht wird. Diese dann vergleichen:
Code:
    <input id="testinput" />
    <table id="dbem-bookings-table">
        <thead></thead>
        <tbody>
            <tr>
                <td><a href="#">Kurs 8 Bogenschiessen  - Teil 1</a></td>
                <td>Freitag, 1. September 2017</td>
                <td>Max Muster</td>
            </tr>

            <tr>
                <td><a href="#">Kurs 1 - Testkurs</a></td>
                <td>Donnerstag, 29. September 2017</td>
                <td>Hugo Muster</td>
            </tr>
        </tbody>
    </table>
    <script>
        $("#testinput").on("change", function () {
            var text1 = $(this).val().replace(/[^0-9a-zA-Z]/g, "");
            console.log(text1);
            $("#dbem-bookings-table tr td:first-child a").each(function (idx, item) {
                var text2 = $(this).text().replace(/[^0-9a-zA-Z]/g, "");
                console.log(text2);
                if (text2.indexOf(text1) != -1) console.log("match");
            })
        });
    </script>
 
Zuletzt bearbeitet:
Reactions: ldb

ldb

Mitglied
3 Dezember 2012
149
0
16
Danke, Sempervivum!

Der Vergleich der Strings funktioniert wunderbar. Leider habe ich aber keine Idee, wie ich nun das oder die "matchenden" Element(e) so ansprechen kann, dass einzig die entsprechenden Zeilen noch in der Tabelle angezeigt werden. Anders gesagt, wie kann ich diejenigen Tabellen-Zeilen ausblenden, die beim Vergleich keinen passenden Inhalt haben?

Dankeschön und liebe Grüsse aus der Schweiz
Lukas
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Das ist auch kein Problem. Möchtest Du die betr. Zeilen nur ausblenden, unsichtbar machen, oder ganz löschen?
 

ldb

Mitglied
3 Dezember 2012
149
0
16
Cool! Ideal wäre es, die betreffenden Zeilen ganz zu löschen :)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Dies sollte es tun:
Code:
    <script>
        $("#testinput").on("change", function () {
            var text1 = $(this).val().replace(/[^0-9a-zA-Z]/g, "");
            console.log(text1);
            $("#dbem-bookings-table tr").addClass("nomatch");
            $("#dbem-bookings-table tr td:first-child a").each(function (idx, item) {
                var text2 = $(this).text().replace(/[^0-9a-zA-Z]/g, "");
                console.log(text2);
                if (text2.indexOf(text1) != -1) {
                    console.log("match");
                    $(this).parents("tr").removeClass("nomatch");
                }
            })
            $($("#dbem-bookings-table tr.nomatch")).remove();
        });
    </script>
 
Reactions: ldb

ldb

Mitglied
3 Dezember 2012
149
0
16
Wow, das funktioniert wirklich genauso wie es soll!
Danke dir ganz herzlich!! :)