Tabellenzeilen unterschiedlich gestalten mit jQuery

Juli 26th, 2010 | Tags: , , , ,
Anzeige

Vielen lange Tabellen haben den Nachteil, dass sie unübersichtlich werden. Schnell verrutscht man in der Zeile und schon kann man von vorne anfangen. Beliebt ist es ja, jede zweite Zeile unterschiedlich zu formatieren um nicht ganz so schnell die Übersicht zu verlieren.

Am einfachsten ist es, wenn man eine statische Tabelle hat, die sich nicht mehr verändert. Einfach jede gerade (engl. even) oder ungerade (engl. odd) Zeile mit einer entsprechenden CSS Klasse  versehen. Wie man dann das CSS gestaltet ist jedem selbst überlassen aber eine dezente Hintergrundfarbe ist immer Hilfreich.

Das Ganze wird erst zu einem Problem, wenn man die Tabelle am besten per JavaScript dynamisch erstellen lässt. Nehmen wir an es können beliebig viele Zeilen hinzugefügt werde und an beliebigen Stellen wieder entfernt werden, so dass die Reihenfolge nicht vorhersehbar ist. Also müssen die Formatierungen dynamisch vorgenommen werden. Beispielhaft soll das mal an der statischen Tabelle gezeigt werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery even odd</title>
	<meta name="author" content="Sebastian Thiele">
	<!-- Date: 2010-07-25 -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function() {
	    $("tbody").find("tr:even").addClass("even");
	    $("tbody").find("tr:odd").addClass("odd");
	  });
	</script>
	<style type="text/css">
	  .even{color:red;}
	  .odd{color:blue;}
	</style>
</head>
<body>

  <table>
    <thead>
      <tr>
        <th>Zeile1</th>
        <th>Zeile1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Zeile2</td>
        <td>Zeile2</td>
      </tr>
      <tr>
        <td>Zeile3</td>
        <td>Zeile3</td>
      </tr>
      <tr>
        <td>Zeile4</td>
        <td>Zeile4</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

In dem Beispiel werden alle gerade und ungeraden Zeilen der Tabelle (genauer gesagt innerhalb des tbody’s) unterschiedlich formatiert. Wenn es kein tbody gibt, musst einfach das (“tbody”) weggelassen werden.

Auf das fiktive, dynamische Problem von oben angewendet muss der super simple jQuerykonstrukt in den “Zeile hinzufügen” oder “Zeile entfernen” Aufruf eingebunden werden.

Super simple dank jQuery.

Weiter lesen


Keine Kommentare
Kommentieren