Tabelle mit Suchfunktion

  • Ich weiß gar nicht ob ich hier in den Bereich richtig bin.


    Ich habe für jemanden eine Wordpress Seite aufgelegt, in den ich komplexe HTML Tabellen eingelegt hab. Diese Tabellen soll eine Suchfunktion haben,

    was ich auch mittels Javascript funktioniert. Aber es funktioniert nur mittels Chrome Browser. Im Safari oder auf dem Handy funktioniert es nicht.

    Obwohl im Safari und auf den Handy Browsern Javascript aktiviert ist.


    Ich weiß nicht woran es liegt und hoffe mir kann jemand helfen. Oder eine alternative Lösung nennen. Die Suchfunktion muss sowohl auf den Handy als auch auf den Desktop funktionieren und responsive sein. Und sie muss einfach im Backend editierbar sein, weswegen ich das in Wordpress eingeflickt habe.

    Hier der Script:


    HTML

    <div class="form-group pull-right"><input class="search form-control" type="text" placeholder="What you looking for?" /></div>

    &nbsp;

    <table class="table table-hover table-bordered results">

    <thead>

    <tr>

    <th>#</th>

    <th class="col-md-1">ZEIT</th>

    <th class="col-md-1">Montag</th>

    <th class="col-md-1">DIENSTAG</th>

    <th class="col-md-1">MITWOCH</th>

    <th class="col-md-1">DONNERSTAG</th>

    <th class="col-md-1">FREITAG</th>

    <th class="col-md-1">SAMSTAG</th>

    <th class="col-md-1">SONTAG</th>

    </tr>

    <tr class="warning no-result">

    <td colspan="4"><i class="fa fa-warning"></i> No result</td>

    </tr>

    </thead>

    <tbody>

    <tr>

    <th scope="row">1</th>

    <td>Test1</td>

    <td>Test2</td>

    <td>Test3</td>

    <td>Test4</td>

    <td>Test5</td>

    <td>Test6</td>

    <td>Test7</td>

    <td>Test8</td>

    </tr>

    <tr>

    <th scope="row">2</th>

    <td>Test1</td>

    <td>Test2</td>

    <td>Test3</td>

    <td>Test4</td>

    <td>Test5</td>

    <td>Test6</td>

    <td>Test7</td>

    <td>Test8</td>

    </tr>

    <tr>

    <th scope="row">3</th>

    <td>Test1</td>

    <td>Test2</td>

    <td>Test3</td>

    <td>Test4</td>

    <td>Test5</td>

    <td>Test6</td>

    <td>Test7</td>

    <td>Test8</td>

    </tr>

    <tr>

    <th scope="row">4</th>

    <td>Test1</td>

    <td>Test2</td>

    <td>Test3</td>

    <td>Test4</td>

    <td>Test5</td>

    <td>Test6</td>

    <td>Test7</td>

    <td>Test8</td>

    </tr>

    <tr>

    <th scope="row">5</th>

    <td>Test1</td>

    <td>Test2</td>

    <td>Test3</td>

    <td>Test4</td>

    <td>Test5</td>

    <td>Test6</td>

    <td>Test7</td>

    <td>Test8</td>

    </tr>

    </tbody>

    </table>



    CSS

    table{

    padding:20px 20px;

    text-transform: lowercase;

    text-transform: uppercase;

    width: 120 %;

    font-size: 0.7em;

    }

    .results tr[visible='false'],

    .no-result{

    display:none;

    }

    .results tr[visible='true']{

    display:table-row;

    }

    .counter{

    padding:8px;

    color:#ccc;

    }


    JAVASCRIPT:



    Vielen Dank

  • Hallo admiss

    das es in einem Browser funktioniert und in einem anderen nicht, kann evtl. an der Syntax-Interpretation liegen. Fehler in der Syntax mag ein Browser härter abstrafen als ein anderer. Die Ursachensuche kann sehr mühselig sein.
    Ich habe deine öffnenden und schließenden Klammern kontrolliert. Aus meiner Sicht wären die beiden letzten Klammern (in Zeile 25) zu viel. Siehe Screenshot ...


    Gruß HMV

  • Hallo @His.Master's.Voice,

    vielen Dank für Deine Hilfe, ich hab die Klammern entfernt, aber das Problem hat sich nicht behoben.


    Gibt es vielleicht eine Seite, wo man so einen Suchscript der bei allen Browsern funktioniert vorgefertigt findet.

  • Hallo admiss

    ich hatte vergessen zu erwähnen, das letzte Semikolon wäre evtl. auch zu viel. Kann jedoch nicht beurteilen, ob es das vollständige Script ist!

    Mir ist jetzt keine spezielle Seite bekannt. Bleibt nur die Suchmaschine deiner Wahl zu befragen.


    Gibt der Safari den eine Javascript Fehler aus? Hast du schon getestet ob es in einer html Seite ohne Wordpress Einbindung funktioniert um auszuschließen dass WP am Quellcode Veränderungen vornimmt!

    https://codex.wordpress.org/Us…iagnose_JavaScript_Errors

    Gruß HMV

  • In Zeile 5 fehlt ein Semikolon und Zeile 25 darf nicht gelöscht werden. Das ist die schließende Klammer des keyup events.


    So sollte es aussehen: