[DOM] un rowspan effectué dynamiquement

Version imprimable

10/11/2006, 11h07
kingmandrax

[DOM] un rowspan effectué dynamiquement

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à!
11/11/2006, 23h06
kingmandrax

Personne ne peut me donner une piste???
13/11/2006, 12h27
kingmandrax

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!
15/11/2006, 10h14
kingmandrax

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...
15/11/2006, 10h41
SpaceFrog

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

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

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

Code:

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);
	}
 
}

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

Code:

.createElementNS(XMLNS_XHTML, "tr");

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

Code:

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);
	}
 
}

15/11/2006, 12h33
kingmandrax

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:

td.class= "layout";

Pourquoi est-ce que cette syntaxe devrait changer qqch? Il y a une erreur au niveau de ma syntaxe??
15/11/2006, 13h05
SpaceFrog

Code:

td.className="layout"

après ça je ne vois pas ...
15/11/2006, 14h17
kingmandrax

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??
15/11/2006, 14h19
SpaceFrog

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...
15/11/2006, 14h43
kingmandrax

Est-ce que tu veux que je présente la fonction qui se charge d'effectuer le rowspan?
15/11/2006, 14h44
SpaceFrog

juste la partie ou tu attribues le rowspan ou colspan

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:

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

15/11/2006, 15h24
SpaceFrog

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

par exemple:

Code:

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:

if (tr.nodeName == "tr")

fais plutot

Code:

if (tr.nodeName.toLowerCase() == "tr")
15/11/2006, 15h28
kingmandrax

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?
19/11/2006, 10h55
kingmandrax

S'il vous plait...le problème n'est toujours pas résolu!!
22/11/2006, 21h38
irongomme

Meme problême ...

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
23/11/2006, 10h17
kingmandrax

Tiens-nous au courant de tes résultats irongomme!
27/11/2006, 11h50
irongomme

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:

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 ?