Ciao,
Per una cosa del genere io utilizzerei un approccio CSS più che scomodare javascript.
Non è necessario utilizzare una classe per assegnare un css in quel modo, ma esistono altre regole più funzionali.
Partiamo dal principio che per le tabelle sono disponibili vari tag oltre i classici <table>, <tr> e <td>.
Ad esempio gli elementi <thead> e <th> identificano una riga di intestazione e dei dati di tipo intestazione, appunto. Farebbero proprio al caso tuo, per cui, oltre ad ottenere una tabella meglio strutturata più intellegibile e soprattutto più accessibile, sarebbe semplice assegnare delle regole css per tali elementi.
Ad ogni modo, se non vuoi/puoi modificare le tabelle ma vuoi utilizzare i semplici <tr> e <td>, puoi comunque utilizzare delle pseudo-classi css3 per selezionare ad esempio un primo elemento figlio o di un certo tipo, così da assegnare in modo specifico le relative regole css.
Ti posto un esempio pratico con le due soluzioni:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table{
width:300px;
border-collapse:collapse;
}
table, th, td{
border: 1px solid gray;
}
/* -- 1° METODO --
formatto gli elementi thead e th
*/
.tab1 thead{
background:red;
}
.tab1 tbody th{
background:gainsboro;
width:20px;
}
/* -- 2° METODO --
uso le pseudo-classi per fare una selezione degli elementi interessati
*/
.tab2 tr:first-child{
background:green;
font-weight:bold;
text-align:center;
}
.tab2 tr:not(:first-child)>:first-child{
background:gainsboro;
font-weight:bold;
width:20px;
text-align:center;
}
</style>
</head>
<body>
<table class="tab1">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br>
<table class="tab2">
<tr>
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Nota inoltre che gli elementi <th> assegnano una pre-formattazione al testo contenuto (dovrebbe visualizzarsi centrato e in grassetto).
Il risultato dovrebbe essere come questo che allego:
Image1.gif
Ad ogni modo i miei vogliono essere solo dei consigli, l'argomento sarebbe infatti offtopic dato che hai chiesto una soluzione in javascript.
Se però vuoi utilizzare javascript, per preferenza o per curiosità, lascio rispondere eventualmente ad altri.
Rispondi quotando
