Raab: Tabellenzeile bei Klick färben

Beitrag lesen

Guten Morgen,

ich baue gerade eine Tageskarten-Verwaltung für ein Restaurant. Genauer gesagt arbeite ich gerade an der Eingabemaske für die Gerichte.

Ich habe mich entschieden, einen Kalender auf der Seite einzufügen, auf den der Restaurantbesitzer nur die Woche anklicken muss, und für diese komplette Woche die Gerichte eintragen kann.
Der Kalender ist schon fertig (PHP):

  
	<div id="calendar">  
		<div>  
			<a href="?d=prev">&lt;&lt;</a>  
			<span>November 2009</span>  
			<a href="?d=next">&gt;&gt;</a>  
		</div>  
		<table>  
			<thead>  
				<tr>  
					<th>KW</th>  
					<th>Mo</th>  
					<th>Di</th>  
					<th>Mi</th>  
					<th>Do</th>  
					<th>Fr</th>  
					<th>Sa</th>  
					<th>So</th>  
				</tr>  
			</thead>  
			<tbody>  
				<tr>  
					<td class="kw">44</td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">26</a></td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">27</a></td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">28</a></td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">29</a></td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">30</a></td>  
					<td class="n shadow"> <a href="javascript:click(2009, 44)">31</a></td>  
					<td class="n"> <a href="javascript:click(2009, 44)">01</a></td>  
				</tr>  
  
				[ weitere <tr> ]  
			</tbody>  
		</table>  
	</div>  

Das hier ist die erste Woche im November 2009. Die Klasse "shadow" färbt die Zelle einfach grau; diese Zelle gehört noch zum alten Monat. Die Klasse "n" bekommt jede Zelle zugewiesen. Ursprünglich hatte ich das onclick-Ereignis jeder <tr> gegeben. Doch der IE6, 7 und 8 kapierte das nicht, deshalb hat nun jeder Tag diese Funktion erhalten.

Die Färbung beim hovern war einfach:

  
#calendar table tbody tr:hover td.n  
{  
	background-color:#D2691E;  
}  

Somit wird die Zeile beim Drüberfahren mit der Maus markiert (ausgenommen die erste Zelle, die nur zum Anzeigen der jeweiligen KW existiert).
Bild, zweite Zeile ist gehovert.

Ich möchte nun, damit der Benutzer auch weiß, welche Woche er gerade ausgewählt hat, die ausgewählte Zeile entsprechend färben.

Mir schweben da ein paar Möglichkeiten vor. Jedoch weiß ich nur bei den wenigsten, wie der Ansatz sein müsste und hoffe da auf Entscheidungshilfe bzw. Hilfestellungen bzw. Alternativen:

1. Ajax - beim Klick auf die Zelle wird das div #calendar neu geladen und die Zeile gefärbt. Performance?
2. JavaScript - Wie greift man dort auf die (bspw.) dritte <tr> zu, die sich nicht von den anderen unterscheidet?
3. CSS - man brächte ein :click oder so etwas...

Liebe Grüße
Raab