Einfärben von Tabellenzeilen mit JavaScript
Das folgende Beispiel zeigt das Einfärben von Tabellenzeilen mit JavaScript.
Dies wird hier als Lehrbeispiel für JavaScript vorgestellt sollte in der Praxis aber besser mit reinem CSS erfolgen. (JavaScript hätte nur eine Berechtigung, wenn die CSS-Funktionen dafür in einem Einzelfall aus bestimmten Gründen nicht nutzbar sind oder nicht ausreichen.)
- Main.html
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
.red {background: #E88}
.green {background: #8E8}
</style></head><body>
<table id="table" summary="example table summary" width="100%">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<caption>example table caption</caption>
<tr valign="bottom">
<th align="left"><strong>left</strong></th>
<th align="left"><strong>right</strong></th></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
<tr valign="top"><td>left</td><td>right</td></tr>
</table>
<pre><code><script>/*<![CDATA[*/
( function()
{ "use strict";
const animate = function animate()
{ "use strict";
const rows = document.getElementById( "table" ).
getElementsByTagName( "tr" );
const l = rows.length;
for( let i = 0; i < l; ++i )
{ const list = rows[ i ].classList;
list.remove( 'red', 'green' );
list.add(( i + animate.j )% 2 ? 'red' : 'green' ); }
++animate.j; setTimeout( animate, 1000 ); }
animate.j = 0;
setTimeout( animate, 1000 ); } )();
/*]]>*/</script></code></pre></body></html>- CSS (als Alternative)
tr:nth-child(even) {background: #E88}
tr:nth-child(odd) {background: #88E}