Tabellenzeile bei Klick färben

[Raab]

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

[suit]

<a href="javascript:click(2009, 44)">31</a></td>

Wofür ist das a-Element?
Wozu dienen die Parameter in der Funktion?

1. Ajax - beim Klick auf die Zelle wird das div #calendar neu geladen und die Zeile gefärbt. Performance?

Wenn die Daten ansich nicht geändert werden sondern nur auf eine definierte clientseitige Aktion clientseitig reagiert wird ist Ajax absolut unsinnig.

2. JavaScript - Wie greift man dort auf die (bspw.) dritte <tr> zu, die sich nicht von den anderen unterscheidet?

Warum willst du das überhaupt? Es reicht doch, auf das geklickte Elemente zu referenzieren.

3. CSS - man brächte ein :click oder so etwas...

:active dürfte nicht das sein was du suchst.

[ChrisB]

Hi,

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

2. JavaScript - Wie greift man dort auf die (bspw.) dritte <tr> zu, die sich nicht von den anderen unterscheidet?

Man greift überhaupt nicht auf "das dritte" TR-Element zu - sondern lediglich auf das, auf welches geklickt wurde.

MfG ChrisB