jQuery Tabelle mit odd & even (JavaScript)

Und wieder einmal geht es um ein Problem, auf das so ziemlich jeder Webentwickler schon einmal gestoßen ist. Man möchte eine Tabelle mit alternierenden Zeilenfarben erstellen und muss jedesmal überlegen, wie man das in PHP und dem Modulo-Operator umsetzt. Doch jetzt gibt es endlich Abhilfe: Ein jQuery-Selector für odd und even nimmt uns bequem die Arbeit ab.

Und so geht’s:

View Code XML

<style type="text/css">
tr.odd { background-color: #f00; }
tr.even { background-color: #0f0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('tbody tr:odd').addClass('odd');
	$('tbody tr:even').addClass('even');
});
</script>
 
<table>
	<thead>
		<tr>
			<th>Überschrift 1</th>
			<th>Überschrift 2</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
		</tr>
		<tr>
			<td>Dolor</td>
			<td>Sit</td>
		</tr>
		<tr>
			<td>Amet</td>
			<td>Consectetuer</td>
		</tr>
	</tbody>
</table>

Unser kleines JavaScript schnappt sich selbständig die Tabellenzeilen und fügt automatisch die CSS-Klassen odd und even ein. Ganz nach dem Motto „Write Less, Do More“ wie es jQuery immer verspricht.

Schreibe einen Kommentar