[DOM] un rowspan effectué dynamiquement

**kingmandrax** · 10/11/2006, 11h07

Bonjour,

J'ai un problème dans mon appli web, j'ai un tableau classique HTML et chaque case est cliquable par l'utilisateur. Une des fonctionnalités est la fusion des cellules. Lorsque l'utilisateur clique sur une cellule, un message demande combien de cellule il souhaite fusionner (verticalement ou horizontalement) et mon code javascript fait les manips nécessaires.

Actuellement aucun problème n'est apparu avec le fusionage horizontal (colspan), tout réagit correctement et le tableau est modifié en conséquence dynamiquement! Par contre j'ai un souci avec le fusionage vertical (rowspan), une cellule est bien effacée sur la ligne en dessous de celle que j'ai cliquée mais par contre le rowspan n'est pas effectué. Pour m'en persuader, j'ai créé une petite fonction qui prend le code généré et qui l'insère dans un fichier sur le disque. Lorsque j'ouvre ce fichier, le rowspan s'affiche tout à fait correctement!!! Preuve donc que le problème vient qu'il ne peut pas le faire dynamiquement...qqn aurait-il eu le même genre de phénomène??

Juste pour info, je fait tourner mon appli sous Firefox.

Merci d'avance, je galère vraiment là!

**kingmandrax** · 11/11/2006, 23h06

Personne ne peut me donner une piste???

**kingmandrax** · 13/11/2006, 12h27

En fait je génère dynamiquement mon tableau...je viens de me rendre compte que si le tableau est décrit en dur dans le fichier html alors là c'est tout bon! Comment se fait-il que le fait de créer ce tableau dynamiquement change le comportement? Surtout que le colspan marche tout de même!!!

Le fait d'écrire le code en dur n'est pas vraiment une solution pour moi, j'ai besoin de pouvoir créer ce tableau dynamiquement!

Merci d'avance!

**kingmandrax** · 15/11/2006, 10h14

Personne n'a déjà rencontré ce "bug"? Je le redis : lorsque mon tableau est créé dynamiquement le rowspan ne s'applique pas dynamiquement sur les cellules incriminées par contre si le tableau a été codé en dur dans mon fichier XHTML alors c'est tout bon!! Bizarre bizarre...

**SpaceFrog** · 15/11/2006, 10h41

quel code utilises tu pour créer ton tableau dynamiquement ...

tu le fais à l'arrache avec du innerHTML ou tu utilises le DOM ?

**kingmandrax** · 15/11/2006, 11h38

J'utilise le DOM, voilà le code si jamais :

Code :

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
21
this.createLayout = function(nbColumns, nbLines) {
 
        // Insère une nouvelle ligne
	for (var l=0; l<nbLines; l++) {
 
		var tr = document.createElementNS(XMLNS_XHTML, "tr");
 
		// Insère une nouvelle cellule dans la ligne courante
		for (var c=0; c<nbColumns; c++) {
			var td = document.createElementNS(XMLNS_XHTML, "td");
			td.setAttribute("class", "layout");
			td.setAttribute("id", "td" + l + "" + c);
			td.setAttribute("onclick", "controller.insertComponent(this);");
 
			tr.appendChild(td);
		}
 
		document.getElementById("tableID").appendChild(tr);
	}
 
}

**SpaceFrog** · 15/11/2006, 11h43

c'est quoi ça? tu utilise une librairie ?

Code :

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

.createElementNS(XMLNS_XHTML, "tr");

essaye plutot de t'inspirer de cette syntaxe ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
		// Insère une nouvelle cellule dans la ligne courante
		for (var c=0; c<nbColumns; c++) {
			var td = document.createElement("td");
			td.class= "layout";
			td.id= "td" + l + "" + c;
			td.onclick=function(){controller.insertComponent(this)};
			tr.appendChild(td);
		}
 
		document.getElementById("tableID").appendChild(tr);
	}
 
}

**kingmandrax** · 15/11/2006, 12h33

XMLNS_XHTML est en fait une constante qui contient l'URL correspondant au namespace du XHTML.

Ton code n'a absolument rien changé et il n'aime même pas du tout la ligne :

Code :

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

td.class= "layout";

Pourquoi est-ce que cette syntaxe devrait changer qqch? Il y a une erreur au niveau de ma syntaxe??

**SpaceFrog** · 15/11/2006, 13h05

Code :

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

td.className="layout"

après ça je ne vois pas ...

**kingmandrax** · 15/11/2006, 14h17

Alors effectivement c'était "className" mais sinon ça ne change rien à mon problème : le rowspan effectué dynamiquement ne s'affiche pas correctement!

SpaceFrog >> Pourquoi pensais-tu que ça venait de la syntaxe??

**SpaceFrog** · 15/11/2006, 14h19

rcequ'il arrive que les tableaux masquent certains éléments ... il faut alors utiliser un syntaxe rigoureuse à base d'id pour accéder aux éléments ...

ceci étant je n'ai pas vu ta syntaxe d'attribution de colspan ou de rowspan...

**kingmandrax** · 15/11/2006, 14h43

Est-ce que tu veux que je présente la fonction qui se charge d'effectuer le rowspan?

**SpaceFrog** · 15/11/2006, 14h44

juste la partie ou tu attribues le rowspan ou colspan

**kingmandrax** · 15/11/2006, 14h55

Voilà la fonction (notons juste au passage que l'arbre généré est correct vu que quand je le sauve sur le disque et que j'ouvre le fichier créé dans un browser, le rowspan est affiché correctement) :

Code :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
Utils.prototype.executeRowSpan = function(obj, nbRows) {
 
	var lineCells = obj.parentNode.getElementsByTagName("td");
	var noColon = -1;
 
	// Trouve le numéro de la colonne correspondant à la cellule cliquée
	for (var i=0; i<lineCells.length; i++) {
		noColon++;
 
		// On pointe sur la bonne cellule
		if (lineCells[i] == obj) {
			break;
		}
	}
 
	var col = obj.parentNode; // Tag <tr> englobant la cellule cliquée
	var cols = obj.parentNode.parentNode.getElementsByTagName("tr");
	var noLine = -1;
 
	// Trouve le numéro de la ligne correspondant à la cellule cliquée
	for (var i=0; i<cols.length; i++) {
		noLine++;
 
		// On pointe sur la bonne ligne
		if (cols[i] == col)
			break;
	}
 
	var tr = cols[noLine];
	// Il faut effacer les tag <td> qui sont aux lignes en dessous
	for (var i=0; i<nbRows-1; i++) {
 
		while (tr.nextSibling) {
			tr = tr.nextSibling;
			if (tr.nodeName == "tr")
				break;
		}
 
		// Tags <td> présent dans la ligne courante en dessous
		trChilds = tr.getElementsByTagName("td");
 
		// On supprime la cellule en dessous de celle cliquée
		trChilds[noColon].parentNode.removeChild(trChilds[noColon]);
	}
 
	// La valeur de l'attribut rowspan est ajouté/mis à jour
	obj.setAttribute("rowspan", nbRows);
 
}

"obj" c'est un objet correspondant à la cellule (tag <td>) cliquée

**SpaceFrog** · 15/11/2006, 15h24

pour debugguer essaye de mettre des alerts sur le lengths des objets ...

par exemple:

Code :

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

alert(var cols = obj.parentNode.parentNode.getElementsByTagName("tr").length);

de même le coup du nextsibling est dageureux car parfois il y a des textnodes qui s'insèrent sans qu'on ne leur ait demandé ...

et puis là :

Code :

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

if (tr.nodeName == "tr")

fais plutot

Code :

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

if (tr.nodeName.toLowerCase() == "tr")

**kingmandrax** · 15/11/2006, 15h28

Merci pour ces quelques conseils. Par contre, pas de soucis pour les noeuds textuels vu que je teste que le noeud courant soit de type <tr> ou <td>!

As-tu vu quelque chose qui cloche?

**kingmandrax** · 19/11/2006, 10h55

S'il vous plait...le problème n'est toujours pas résolu!!

**irongomme** · 22/11/2006, 21h38

Bonjour,

Moi aussi j'ai essayé tout un tas de chose car je suis en train d'élaborer un planning collectif et j'ai besoin de modifier dynamiquement le rowspan des cellules ... Malheuresement, comme ca a été dis, les colspan fontionnent très bien mais pas les rowspan.

Peut - être que la solution est d'abondonner ces fichu tableaux, et de tout faire avec des div, ensuite il n'y aurait plus que les dimensions height et width à gerer avec la propriété style ... je sens que je vais faire un essai !!

Personne n'a trouvé une solution depuis ? merci

**kingmandrax** · 23/11/2006, 10h17

Tiens-nous au courant de tes résultats irongomme!

**irongomme** · 27/11/2006, 11h50

Salut tout le monde,

alors voila j'ai réussi à obtenir ce que je voulais. La solution ? Plus un seul tableau mais que des DIV en positionnement absolu (obtenu dynamiquement), et donc avec certaines cellules plus hautes que les autres. Car c'est plus simple je trouve avec la propriété mondiv.style.height que montableau.rows qui lui ne fonctionnait pas.

Par contre un autre problême se présente actuellement :

Code :

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

monbouton.type = 'button';

fonctionne très bien sous ff, mais me declenche une erreur sous ie ....
Est-ce que ça vous est arrivé ? y a t'il une solution ?

[DOM] un rowspan effectué dynamiquement

JavaScript

Discussions similaires

Partager

Partager