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?
Jetzt füge eine Zeile ganz am Schluss ein, entspr. Kommentar
<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>So geht es wieder. Moment, ich sehe weiter hinein ...
Du musst das Javascript darüber beibehalten:
<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>Versuche folgendes:
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');
}Wenn Du es nicht weißt, ist das alles vorgefertigt für eine Seite über Handball?
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.
Beschreibe doch Mal, wie Du diese Tabellen erzeugst.
Informiere dich erst Mal, wie man CSS einbindet, z. B. hier:
https://www.html-seminar.de/stylesheets_in_html_einbinden.htm
Fangen wir mit dem einfachen an, einem Bild. Da gibt es zwei Möglichkeiten:
1. Das Bild mit CSS als Hintergrund für den Container einstellen. Dann gibt es bei CSS ein background-size: cover; das den Browser anweist, das Bild so einzurichten, wie Du es oben beschrieben hast.
2. Das Bild allein zu verwenden. Dann gibt es bei CSS ein object-fit: cover; , das das Bild ebenfalls so einrichtet.
Um den Container bzw. das Bild so einzustellen, dass es das Browserfenster ausfüllt, wirst Du Viewport-Units brauchen.
Ich habe da mal ein Fiddle gemacht, das die wesentlichen Effekte demonstriert:
https://jsfiddle.net/Sempervivum/zn0sp6mw/36/
In die Darstellung der Icons mit Fontawesome, Flaticon o. ä. bin ich dabei nicht eingestiegen.
Ich konnte den Fehler reproduzieren. Es ist so, dass dein HTML nicht valide ist:
Error: Start tag
formseen intable.From line 18, column 17; to line 19, column 36
</thead>↩ <form id='list' name='list'>↩Error: Element
formnot allowed as child of elementtablein this context. (Suppressing further errors from this subtree.)From line 18, column 17; to line 19, column 36
</thead>↩ <form id='list' name='list'>↩
D. h. ein Formular in einer Tabelle ist nicht zulässig. Wohl aber der umgekehrte Fall: Wenn ich das HTML so ändere, funktioniert alles:
<form id='list' name='list'>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
</tr>
</thead>
<tbody id='list-content'> //Hier wird der Inhalt neu rein geladen
<tr>
<td><input type='checkbox' name='raw[]' id='raw_1' value='x1' /></td>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
</tr>
<tr>
<td><input type='checkbox' name='raw[]' id='raw_2' value='x2' /></td>
<td>Inhalt 3</td>
<td>Inhalt 4</td>
</tr>
<tr>
<td><input type='checkbox' name='raw[]' id='raw_3' value='x3' /></td>
<td>Inhalt 5</td>
<td>Inhalt 6</td>
</tr>
</tbody>
</table>
</form>Wie wird das Versenden des Formulars denn überhaupt angestoßen? In dem Code, den Du gepostet hast, liegt es in einem document-ready?
Ich sehe da einen Syntaxfehler in Zeile 7:
data: $(list).serialize()},
die schließende geschweifte Klammer gehört da nicht hin.
Da war eine Lösung mit substr etc. aber ich habe mal selbst etwas ausgearbeitet:
function mb_substr_replace($subject, $start, $length, $replace)
{
$pattern = '(.{' . $start . '})(.{' . $length . '})';
$replace = '\\1' . $replace;
return mb_ereg_replace($pattern, $replace, $subject);
}
$subject = 'äöüßßüöäaaaaa';
$result = mb_substr_replace($subject, 5, 3, "xxxxx");
var_dump($result);
$subject2 = 'aaaaabbbccccc';
$result = mb_substr_replace($subject2, 5, 3, "yyyyy");
var_dump($result);Auf solche Probleme wird auch bei Selfhtml hingewiesen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ist-style-image
Lösung mit Hintergrundgrafik, wie dort empfohlen:
Mir schein, da fehlt jetzt das Bootstrap-JS. Ohne das wird das Modal nicht funktionieren.
Wenn ich das Javascript ganz unten, Zeilen 187 bis 193 heraus nehme, funktioniert alles wie gewünscht. Ich denke, den IE10 brauchen wir wirklich nicht mehr zu berücksichtigen.
Gestern war ich zufällig auch in der Situation, auf meinem Android-Handy ganz schnell einen FTP-Client zu brauchen. Ich habe mich dann auf Grund der Bewertungen für Admin Hands entschieden und dieser hat einwandfrei funktioniert.
Klappt's denn jetzt mit den Umlauten?