Cambiare le classi nelle TD

**fabiodm75** · 28-06-2011, 12:23

Ciao a tutti,
ho una tabella con 3 colonne e n righe vorrei fare in modo che ognuna delle tre colonne abbia una classe personalizzata come posso fare? Io ho fatto questo esempio ma la classe viene applicata a tutte le colonne...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<style type="text/css">
.classOrig {background-color:#00FF33}

.classMod1{background-color:#33CCFF}
.classMod2{background-color:#336699}
.classMod3{background-color:#FF9900}
</style>


</head>

<body>


<table id="tbl1">
	<tr>
    	<td class="classOrig">
        	a
        </td>
        <td>
        	b
        </td>
        <td>
        	c
        </td>        
    </tr>
	<tr>
    	<td class="classOrig">
        	a1
        </td>
        <td>
        	b1
        </td>
        <td>
        	c1
        </td>        
    </tr>    
</table>
</body>
</html>

<script type="text/javascript">
	miaTD = document.getElementsByTagName("TD");
	for(i=0; i<miaTD.length; i++){
		//alert(obj[i].childNodes[0].nodeValue);
		miaTD.item(i).className = "classMod1";
	}
</script>

Come posso fare?

Ciao e grazie
Fabio

**Vindav** · 28-06-2011, 15:40

Potresti provare cosi ovviamente devi sapere a priori quante colonne hai:

codice:

numcol = 3;
miaTD = document.getElementsByTagName("TD");
	for(i=0; i<miaTD.length; i++){
            miaTD.item(i).className = "classMod"+i%numcol;
	}

e le classi css devi chiamarle cosi:

.classMod0{background-color:#33CCFF}
.classMod1{background-color:#336699}
.classMod2{background-color:#FF9900}

Discussione: Cambiare le classi nelle TD

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare le classi nelle TD

Permessi di invio