Code Erweiterung

cele4

Liebe Community, liebe Profis

Ich stehe vor einem Rätsel.

Auf meiner Webseite https://www.handball-hall-of-fame.ch/player/baumgar…l-hall-of-fame/ befinden sich Tabellen, die farbig hinterlegt sind. Dies funktioniert soweit wie gewünscht. Wenn ich nun auf "nächste" klicke, wird diese ebenfalls farbig dargestellt, jede weitere jedoch nicht.

Kann mir vielleicht jemand helfen, damit alle weiteren Seiten der Tabellen diese Hintergrund Farbe erhalten?

Ich bedanke mich schon in Voraus für die Hilfe.

Code

<script type="text/javascript">

    window.addEventListener('load', function() {
        changeColors();
        var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
        for(var j = 0; j<nextButton.length; j++) {
            nextButton[j].addEventListener('click', function () {
                changeColors();
            });
        }
    });
function changeColors() {
    var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
        else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
        else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
        else if (tds[i].innerText === 'Total') {
            tds[i].parentElement.style.fontWeight= 'bold';
            tds[i].parentElement.style.backgroundColor = '#AFDBF1';
        }
    }
    nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');
}
</script>

Alles anzeigen

Sempervivum

Beschreibe doch Mal, wie Du diese Tabellen erzeugst.

cele4

Die Tabelle wird mit dem Plugin Visualizer erzeugt.

Sempervivum

Und wo kommen die Daten her? Die Vermutung liegt nahe, dass sie von einer API geholt werden und dass diese asynchron arbeitet, d. h. wenn Du next drückst, wird eine Anfrage an den Server geschickt. Weil dies einen kurzen Moment dauert, ist das Einfärben schon vorbei. Aber nur eine Vermutung.

cele4

Das kann ich dir leider nicht beantworten.

Beim 1. Klick auf Next funktioniert es ja. Erst ab der 3. Seite nicht mehr.

Sempervivum

Wenn Du es nicht weißt, ist das alles vorgefertigt für eine Seite über Handball?

cele4

Nein

Die ganze Seite habe ich erstellt.

Die Tabellen stammen von Visualizer. Dieser Code hat mir ein Mitarbeiter erstellt, der soweit gut funkioniert, zumindest für die ersten beiden Seiten.
Leider durfte er mir eigentlich gar nicht helfen in erstellen von Codes. Deshalb habe ich jetzt zwar etwas das funktioniert, aber eben nicht zu 100%

Sempervivum

Versuche folgendes:

Code

function changeColors() {
    var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
        else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
        else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
        else if (tds[i].innerText === 'Total') {
            tds[i].parentElement.style.fontWeight= 'bold';
            tds[i].parentElement.style.backgroundColor = '#AFDBF1';
        }
    }
    // die folgende Anweisung deaktivieren:
    // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');
}

Alles anzeigen

cele4

Da wird dann gar keine Farbe mehr angezeigt

Edit:

Angezeigt wird es genau so wie vorher, einfach zwei Seiten

Sempervivum

Du musst das Javascript darüber beibehalten:

Code

<script type="text/javascript">
    window.addEventListener('load', function() {
        changeColors();
        var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
        for(var j = 0; j<nextButton.length; j++) {
            nextButton[j].addEventListener('click', function () {
                changeColors();
            });
        }
    });
function changeColors() {
    var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
        else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
        else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
        else if (tds[i].innerText === 'Total') {
            tds[i].parentElement.style.fontWeight= 'bold';
            tds[i].parentElement.style.backgroundColor = '#AFDBF1';
        }
    }
    // die folgende Zeile auskommentieren:
    //nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');
}
</script>

Alles anzeigen

cele4

Ja hab ich. Hab den Beitrag editiert.

Es ist genau so wie vorher, zwei Seiten werden angezeigt, die 3. bleibt weiss

Sempervivum

So geht es wieder. Moment, ich sehe weiter hinein ...

Sempervivum

Jetzt füge eine Zeile ganz am Schluss ein, entspr. Kommentar

Code

<script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', function () {
                    changeColors();
                });
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            document.getElementById('DataTables_Table_5_next').addEventListener('click', changeColors);

        }
    </script>

Alles anzeigen

cele4

Sieht immer noch gleich aus

cele4

Weil Table 5 so nicht funktioniert, weil jede Tabelle verschiedene IDs aufweisen. Tabelle 5 ist nicht immer am selben Ort

Sempervivum

Ja, ich habe mich jetzt erst Mal auf die Tabelle 5 konzentriert und die ID verwendet. Du hast jedoch einen Fehler gemacht: Die neue Zeile muss oberhalb der schließenden Klammer stehen. Sie dir genau den Code in Posting #13 an.

Aber zur Klärung: Betrifft das Problem alle Tabellen?

cele4

Perfekt!

Tabelle 5 funktioniert

https://www.handball-hall-of-fame.ch/player/baumgar…l-hall-of-fame/ (International)

Ja, es betrifft sämtliche Tabellen

Sempervivum

OK, wenn das so funktioniert, müssen wir das jetzt auf alle Tabellen anwenden. Moment ...

Sempervivum

Versuche dies (leider kann ich es nicht testen, weil mir die ganze Umgebung fehlt):

Code

<script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', changeColors);
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

cele4

Absolut perfekt!

Ich danke dir sowas von Herzen!

Vielen herzlichen Dank

Jetzt mitmachen!