Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Oskiator Messages postés 176 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 - 16 juin 2012 à 16:31
Oskiator Messages postés 176 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 - 17 juin 2012 à 16:31
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 dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 juin 2012 à 17:23
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 mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 19
16 juin 2012 à 17:45
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 dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 juin 2012 à 19:20
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 mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 19
16 juin 2012 à 21:00
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 dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 juin 2012 à 23:09
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 mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 19
17 juin 2012 à 00: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 mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 19
17 juin 2012 à 00:23
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 dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
17 juin 2012 à 12:36 
<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 mardi 10 mars 2009 Statut Membre Dernière intervention 5 avril 2021 19
17 juin 2012 à 16:31
Merci pour tout ! C'est parfait.
0

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
Pat -

10 réponses