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

Résolu
Oskiator Messages postés 216 Statut Membre -  
Oskiator Messages postés 216 Statut Membre -
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

4 réponses

  1.
    Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    1. Oskiator Messages postés 216 Statut Membre 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
  2. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    1. Oskiator Messages postés 216 Statut Membre 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
  3. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    1. Oskiator Messages postés 216 Statut Membre 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
    2. Oskiator Messages postés 216 Statut Membre 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
  4. Alain_42 Messages postés 5413 Statut Membre 904
     
    <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
    1. Oskiator Messages postés 216 Statut Membre 19
       
      Merci pour tout ! C'est parfait.
      0