Discussion :

[Floyus]

Bonjour,

je suis en train de créer un planning journalier qui pourra m'afficher des évenements.

J'ai créer un tableau html (visuel) grâce au php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<tr><td>heure</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<?php	
		$heure_debut = "07:00";
		$heure_fin = "23:00";
		$count = "0";
		$d = new DateTime($heure_debut);
		while ($d->format('H:i') <= $heure_fin){
			$tab_date = $d->format('H:i') ;
			$d->modify("+30min");
			echo "<tr><td>".$tab_date."</td>";
			$count++;
			for($col = 1 ; $col <=6 ; $col++){
				echo '<td id="'.$col.','.$count.'">Colonne : '.$col.' Ligne :'.$count.'</td>';
			}
			echo "</tr>";
		}
?>
 
</table>

Ce qui me donne :



Ensuite je vais récupérer des évenements dans une base de données pour les afficher en fonction de l'heure de début et de fin, ainsi que du type(numérotation de 1 à 6).

J'ai, pour un évenement, 2 coordonnées (Abscisse et Ordonnée).

Je ne sais pas comment m'y prendre pour par exemple : sélectionner la case qui corresponds à 12h00 (abscisse), et sur le type 6 (ordonnée).

Bien cordialement,

[NoSmoking]

Bonjour,
tu peux accéder à une cellule particulière en utilisant la collection rows de la table et la collection cells de chaque rows.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// affiche le contenu de la 2éme cellule de la 3éme ligne
console.log( oTable.rows[2].cells[1].textContent);

[Floyus]

Bonjour,

Parfait ta solution fonctionne très bien.
J'en profite pour poser une autre petite question :
Voilà mon code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var ligne = 20;
var colonne = 6;
var cellule = table1.rows[ligne].cells[colonne];
var table = document.getElementById("table1"); 
cellule.setAttribute("rowspan","3");
cellule.style.backgroundColor="red";

Vu que mon but est d'afficher des événements qui vont prendre plusieurs ligne "TD" de mon tableau. J'ai essayer de mettre des rowspans. Le souci c'est qu'il faudrait que je supprimer les lignes du dessous pour que mon rowspan ne me décale pas mes cellules.

Exemple: rowspan=2, je dois supprimer la cellule de ma ligne du dessous.

Est ce qu'il y aurait un moyen de contourner le problème sachant que la valeur de mon rowspan va être différente à chaque fois ?

Merci d'avance

[NoSmoking]

Dans le principe il te suffit effectivement de supprimer autant de cellules en dessous que tu as besoin de place, cela peut donner un truc du style de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var lig = 1;
var col = 2;
var haut = 3;
var cellBelow;
var cell = oTable.rows[lig].cells[col];
 
cell.setAttribute( 'rowspan', haut);
cell.style.backgroundColor= 'red';
 
for( var i=1; i < haut; i++){
  cellBelow = oTable.rows[ lig+i].cells[col];
  cellBelow.parentNode.removeChild( cellBelow);
}

[Floyus]

Bonjour,

Très bien, j'ai réussi à faire ce que je voulais avec ton morceau de code.

Merci bien

A la prochaine