Mise en forme d'une ligne ou d'une colonne

Résolu
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   -  
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je cherche à mettre en forme une ligne ou une colonne d'un tableau, sans avoir à mettre un style à chaque <td> d'une ligne ou d'une colonne.

J'aimerais pouvoir appliquer un style sur n'importe quelle colonne (par exemple, j'aimerais pouvoir faire que les 2 première colonnes de mon tableau soit d'une couleur, et qu'en suite les colonnes qui suivent soient de 2 couleurs alternées.)

Merci d'avance !

Oskiator

A voir également:

4 réponses

Réponse 1 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
tu mets une class à tes colonnes
ex: <td class="couleur1"></td>
<td class="couleur1"></td>

<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>


et tu fais du CSS

.couleur1{
//la couleur voulue
}

etc..
0
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   19
 
Mais "<td class="couleur1"></td>" ne s'applique qu'à une cellule de la colonne. Je dois donc faire ça pour chaque td, ce que je veux à tout prix éviter parce que le tableau est grand.
0
Réponse 2 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
ha alors voici une solution en javascript: 
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
	var obj_table=document.getElementById(id_table);
	var arrayLignes = obj_table.rows;
	//parcours de cet array pour atteindre les td
	for(i=0;i<arrayLignes.length;i++){
		var array_td = arrayLignes[i].getElementsByTagName('td');
		//alert("taille array td: "+array_td.length);
		//parcours de cet array pour appliquer un style
		for(j=0;j<array_td.length;j++){
			if((j % 2) ==0){
				//numéro de colonne j pair attention commence à zéro
				array_td[j].style.color="red";
			}else{
				//j impair
				array_td[j].style.color="green";
			}
		}
	}
	

}
</script>
</head>
<body>
	<table id="ma_table" border="1">
		<tr>
			<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
		</tr>
		<tr>
			<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
		</tr>
	</table>
<!-- l'appel de la fonction doit être après la table -->
	<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
0
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci pour ta réponse. Je ne connais pas du tout le javascript. Pourrais-tu encore me dire comment je dois faire pour que ce soit la couleur de fond, et pas la couleur de texte qui change ? Et comment faire pour que la première ligne et les 2 première colonnes soit d'une couleur différentes du reste ?
0
Réponse 3 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
voilà: 
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
	var obj_table=document.getElementById(id_table);
	var arrayLignes = obj_table.rows;
	//parcours de cet array pour atteindre les td
	for(i=0;i<arrayLignes.length;i++){
		var array_td = arrayLignes[i].getElementsByTagName('td');
		//alert("taille array td: "+array_td.length);
		//parcours de cet array pour appliquer un style
		for(j=0;j<array_td.length;j++){
			// tu peux mettre le code hexa HTML de la couleur #......
			if(j==0){
				//premiere col
				array_td[j].style.backgroundColor = "yellow"; //la tu peux mettre le code hexa de la couleur #......
			}else if(j==1){
				//deuxieme col
				array_td[j].style.backgroundColor = "green";
			}else if((j % 2) ==0){
				//numéro de colonne j pair attention commence à zéro
				array_td[j].style.backgroundColor = "red";
			}else{
				//j impair
				array_td[j].style.backgroundColor = "white";
			}
		}
	}
	

}
</script>
</head>
<body>
	<table id="ma_table" border="1">
		<tr>
			<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
		</tr>
		<tr>
			<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
		</tr>
	</table>
	<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
0
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci beaucoup. J'ai encore un dernier soucis. J'ai en fait 2 tableau sur la même page. Si je me trompe pas, l'élément id ne permet de définir le style que d'un seul objet. Comment faire pour que ce style puisse s'appliquer sur plusieurs tableaux ?
0
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   19
 
Ah, j'ai rien dit. Il suffit de recopier "<script type="text/javascript">appliquer_style_table('ma_table')</script>" et de lui donner un second identifiant.
Pourrais-tu encore me dire comment modifier la couleur de la première ligne du tableau ?
0
Réponse 4 / 4
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
  
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
	var obj_table=document.getElementById(id_table);
	var arrayLignes = obj_table.rows;
	//parcours de cet array pour atteindre les td
	for(i=0;i<arrayLignes.length;i++){
		var array_td = arrayLignes[i].getElementsByTagName('td');
		//alert("taille array td: "+array_td.length);
		//parcours de cet array pour appliquer un style
		for(j=0;j<array_td.length;j++){
			if(i==0){
				//je suppose que ta première ligne est en td aussi
				array_td[j].style.backgroundColor = "blue";
			}else{
				// tu peux mettre le code hexa HTML de la couleur #......
				if(j==0){
					//premiere col
					array_td[j].style.backgroundColor = "yellow"; //la tu peux mettre le code hexa de la couleur #......
				}else if(j==1){
					//deuxieme col
					array_td[j].style.backgroundColor = "green";
				}else if((j % 2) ==0){
					//numéro de colonne j pair attention commence à zéro
					array_td[j].style.backgroundColor = "red";
				}else{
					//j impair
					array_td[j].style.backgroundColor = "white";
				}
			}
		}
	}
}
</script>
</head>
<body>
	<table id="ma_table" border="1">
		<tr>
			<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
		</tr>
		<tr>
			<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
		</tr>
	</table>
	<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
0
Oskiator Messages postés 176 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci pour tout ! C'est parfait.
0