Beiträge von Sempervivum

Sempervivum

Nicht die ganze Zeile, sondern nur das if, also statt

if (this != window) this.addEventListener('click', changeColors);

so

this.addEventListener('click', changeColors);

Sempervivum

Dann müssen wir das wieder heraus nehmen. Die letzte Anweisung also wieder so:

this.addEventListener('click', changeColors);

d. h. ohne vorher das window abzufragen. Das ist aber jetzt ziemlich unsauber, weil die Tabellen einfach eingefärbt werden, wenn man irgend wo auf der Seite klickt. Muss ich noch Mal drüber nachdenken.

Sempervivum

Wie ich sehe, das selbe Problem wie am Anfang. Verstehe ich nicht, zwischendurch hat es doch funktioniert.

Sempervivum

Gern geschehen, immer erfreulich, wenn am Schluss etwas funktioniert. Und ich habe etwas Neues über das window-Objekt gelernt.

Sempervivum

So, jetzt passt es. Man erkennt es nur im Debugger. Hätte doch in Zukunft vielleicht unerwünschte Nebeneffekte haben können.

Sempervivum

Das war auch noch falsch window muss klein geschrieben werden:

if (this != window) this.addEventListener('click', changeColors);

Sempervivum

Das komplette Einfärben der Zellen passiert jetzt auch, wenn man irgend wo auf der Seite klickt. Wahrscheinlich sieht man es gar nicht, weil ja genau so eingefärbt wird, wie es schon war, aber ist unsauber.

Sempervivum

Ja, wie ich vermutet hatte, jetzt werden die Tabellen auch gefärbt, wenn man irgend wo im Fenster klickt.

Versuche dies:

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:
            if (this != Window) this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

Sempervivum

Super, freut mich, dass das funktioniert! Da ist aber noch etwas unsauber, wahrscheinlich wird jetzt ein Eventlistener auch für das Window-Objekt registriert und das könnte unerwünschte Nebeneffekte haben. Moment, ich untersuche das ...

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

Sempervivum

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

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?

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

Sempervivum

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

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

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

Sempervivum

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

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.

Sempervivum

Beschreibe doch Mal, wie Du diese Tabellen erzeugst.

Sempervivum

Informiere dich erst Mal, wie man CSS einbindet, z. B. hier:

https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

Beiträge von Sempervivum

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Element zoomen auf Bildschirm Höhe/Breite ohne Verzerren für alle BildschirmTypen.