fusionner des cellules d'un tableau

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/04/2007, 09h33
eyolas

fusionner des cellules d'un tableau

Voila je fais un planning et je voudrais pouvoir fusionner les cellules du tableau lorsque je sélectionne les cellules.

Voila mon exemple et j'aimerai que lorsque je sélectionnne avec une couleur les cellules je veux que ca devienne un seul bloc
16/04/2007, 09h46
SpaceFrog

si c'est sur une seul ligne il faut modifier le colspan de l'une des cellules, concanténer le contenu des cellules selectionnées puis supprimer les tds devenus inutiles ...

si ça s'étend sur plusieurs lignes ... heu ça devient un peu plus complexe , il faudra alors faire la même chose sue le colspan
16/04/2007, 09h59
eyolas

comment on fait avec du javscript pour modifier les collspan
16/04/2007, 10h27
SpaceFrog

Code:

document.getElementsByTagName('table')[0].getElementsByTagnName('td')[2].colspan=3

j'ai pas testé mais peut être auras tu besoin de passer par un setAttribute ou le style ...
16/04/2007, 10h33
eyolas

non marche pas.
En fait si tu as regardé mon exemple je veux que quand je sélectionne plusieurs cellules au lieu que ca fait plen de carré de la meme couleur je veux que ca devienne un bloc de la meme couleur

Code:

colSpan

S majuscule ... :oops:

un exemple juste avec le onclick sur la première cellule et sasn concaténation de contenu ...

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
<script type='text/javascript'>
 
function mergeCells(cellule){
var NextTD
cellule.colSpan="2";
NextTD=cellule.nextSibling;
while(cellule.nextSibling.tagName!='TD'){NextTD=cellule.nextSibling.nextSibling;}
cellule.parentNode.removeChild(NextTD)
 
}
</script>
 
 
 
</head>
 
<body>
 
<table border="1" width="100%">
  <tr>
    <td onclick="mergeCells(this)">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
</table>

16/04/2007, 11h23
eyolas

ton exemple ne marche pas. Il y a un probleme avec ton script.
16/04/2007, 11h25
eyolas

je rectifie le script marche pas sur firefox mais fonctionne sur ie. Mais il faut que cela fontionne sur ie et sur firefox. Si tu sait comment faut faire pour firefox
16/04/2007, 11h27
SpaceFrog

ha oui firefox ...

Code:

while(cellule.nextSibling.tagName.toLowerCase()!='td'){NextTD=cellule.nextSibling.nextSibling;}
16/04/2007, 11h38
eyolas

merci je vais essayer de l'adapter pour mon planning.
Je pense que j'aurai un probleme pour faire l'effet inverse.
16/04/2007, 11h39
SpaceFrog

splitter des cellules ?
c'est faisable mais faudra vérifier le nombre de td sur la ligne
16/04/2007, 11h41
eyolas

Il y a un probleme sur firefox. en fait la cellule s'étire bien mzis ne supprime pas les autres
16/04/2007, 11h46
SpaceFrog

arf nextSibling... bon je vais émuler ça...
16/04/2007, 11h58
eyolas

en fait ce n'est pas que sur firefox. Dès que les colSpan est supérieur à deux il fait pas attention aux cellules qui son selectionnné au milieux.
16/04/2007, 13h45
SpaceFrog

arf ben faut compter le nombre de tds ..
16/04/2007, 14h10
eyolas

Comment veux tu que je fasse?

Voila la fonction que j'ai faite. Sachant que le nombre de td est passé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function mergeCells(cellule,nb){
for(i=0;i<=nb;i++){
var NextTD
cellule.colSpan=nb;
NextTD=cellule.nextSibling;
   if(navigator.userAgent.indexOf("Firefox") != -1) {
      while(cellule.nextSibling.tagName.toLowerCase()!='td'){
         NextTD=cellule.nextSibling.nextSibling;
      }
   } else {
      while(cellule.nextSibling.tagName!='TD'){
         NextTD=cellule.nextSibling.nextSibling;
      }
   }
   cellule.parentNode.removeChild(NextTD);
}
}

16/04/2007, 14h48
eyolas

Cette fonction marche mais j'aimerais que quand je choisi rien Je puisse reconstruire les morceaux supprimer
16/04/2007, 14h55
SpaceFrog

?? tu as fusionné les contenus ?

tu veux dire revenir à la configiration initiale en scindant les cellules ?

heu pour ne pas être ennuyé pas les interprétation divergentes de Nodes entre FFx et IE, je te conseille d'appliquer un nodeCleaner ...
une recherche sur le forum t'apportera toute la lumière sur le nodeCLeaner
16/04/2007, 15h20
eyolas

ok je regarde
16/04/2007, 15h53
eyolas

Je sais que je suis pénible mais pourrez tu m'indiquer où je pourrais trouver ce fameux nodeCleaner
16/04/2007, 16h06
SpaceFrog

http://www.developpez.net/forums/sho...230213#1863087

ce qui simplifie le code comme ceci:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
 
 
function clean(n){
   for(i=0;i<n.length;i++){
      var t=[n[i].previousSibling,n[i].nextSibling];
      for(j=0;j!=2;j++){
         if(t[j] && t[j].nodeType==3){
            if(!/\S/.test(t[j].data)){
               n[i].parentNode.removeChild(t[j])
            }
         }
      }
   }
}
 
window.onload=function(){
	clean(document.getElementsByTagName('*'))
}
 
 
function mergeCells(cellule){
var NextTD;
var ThisTD;
var ThisTR=cellule.parentNode;
var here;
var TRChilds=ThisTR.getElementsByTagName('*');
cellule.colSpan="2";
for (i=0;i<TRChilds.length;i++){if(ThisTR.childNodes[i]==cellule){here=i;}}
here=here+1;
while(TRChilds[here].tagName.toLowerCase()!='td'){here++;}
 
 
TRChilds[here-1].innerHTML+=" "+TRChilds[here].innerHTML
                  ThisTR.removeChild(TRChilds[here]);
 
 
 
}
 
 
</script>
 
 
 
</head>
 
<body>
 
<table border="1" width="100%">
  <tr>
    <td onclick="mergeCells(this)">1</td>
    <td width="20%">2</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
</table>
 
</body>
 
</html>

16/04/2007, 16h28
eyolas

en fait ce que je veux c'est quand je choisi rien et que je clique sur un bloc de couleur, les cases ce remettent comme à l'origine sauf les autres
16/04/2007, 16h31
SpaceFrog

le problème, à part le fait que je n'ai rien compris à ce que tu voulais faire ..., c'est qu'il faudrait avoir sauvegardé quelquepart la structure initiale nombre de td par ligne et contenu initial ...
16/04/2007, 16h46
SpaceFrog

en plus si tu colorises deux cellules déja fusionnées, il faura additionner les colspan ...
le problème reste toujours de garder une trace de l'historique de fusion ...
16/04/2007, 17h10
eyolas

je suis en train de voir comment je vais faire. Je te tiens au courant.
Si tu as des idées dit le moi.
16/04/2007, 17h12
SpaceFrog

souhaites tu autoriser plusieurs niveaux de regroupements ?

genre

refusionner un groupe de cellulesavec un autre groupe ?
16/04/2007, 17h22
eyolas

Oui je veux faire ca
16/04/2007, 17h29
SpaceFrog

alors là ça s'avére complexe ...
car si j'ai bien compris ce n'est pas une simple annulation que tu veux faire, mais pouvoir rendre à n'importe quel moment un retour à la situation précédente d'un td ...

en plu ssi tu as plusieurs regourpements différents sur une même ligne ...

je verrais bien un système d'array histroique ...

genre un array par tr avec une codification des regroupements ...
mais dasn la pratique je ne vois pas encore trop bien la codification qui permettrait de retourver les regourpements faits sur un div ...
16/04/2007, 17h35
eyolas

Vi ca va etre chaud mais bon j'ai pas le choix je dois le faire
16/04/2007, 22h09
SpaceFrog

En y repensant...

Si tu stockes au niveau de l'id du td les fusions

en concaténant

au départ tu aurais

Citation:

id='11' id='12' id='13'

tu fusionnes les deux premiers:

Code:

id='(11_12)' id='13'

tu fusionnes les deux cellules restantes:

Code:

id='((11_12)-13)'

ensuite un peu de parsing sur les id et tu as ton historique ...
17/04/2007, 09h10
eyolas

Ce que tu me dit est une bonne idée mais je ne peu pas faire ainsi car toute mes fonction sont faite sur les id
17/04/2007, 09h16
SpaceFrog

alors attribues un attrubut perso supplémentaire ...

Code:

document.getElementById('montd').regroup="((id1+id2)+id3)
17/04/2007, 14h02
eyolas

je ne vois pas comment tu veux que je fasse
17/04/2007, 14h08
SpaceFrog

ben ce que tu aurais fait avec l'id .. fais le avec regroup ...

essaye d'attribues le regroup puis de faire un alert(this.regroup)
18/04/2007, 15h14
eyolas

C'est quoi faire un regroup?

Un petit exemple

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 
function populate(){
var TDS=document.getElementsByTagName('table')[0].getElementsByTagName('td');
 
for (i=0;i<TDS.length;i++){
		TDS[i].regroup = "moi je suis le td numéro " + i
		TDS[i].onclick=function(){alert(this.regroup)}
		}
		}
</script>
</head>
 
<body onload="populate()">
<table>
	<tr>
		<td> one </td>
		<td> two </td>
	</tr>
</table>	
</body>
 
</html>

tu piges le principe, en fait tu ajoutes juste un attribut au td afin d'y stocker la chaine qui sera représentative de tes regourpements ...

C'est bon je suis arriver a faire ce que je voulé

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
function recreateCellsother(){
var cellule=Cellcourante;
var nb=cellule.colSpan;
cellule.colSpan=1;
cellule.style.backgroundColor="#FFFFFF";
cellule.style.color="1px"
var j=parseInt(idcourant)+1;
var rep=1;
if (cellule.nextSibling=='undefined'){
   rep=0;
}
if(rep==0){//alors la cellule est en fin de ligne
   for(i=2;i<=nb;i++){
      element = document.createElement("td");
      element.setAttribute("colSpan",1);
      element.setAttribute("id",j);
      currenttext = document.createTextNode("");
      element.appendChild(currenttext);
      cellule.parentNode.appendChild(element);
      cellule=element;
      j=j+1;
   }
} else {
   celluleproch=cellule.nextSibling;
   for(i=2;i<=nb;i++){
      element = document.createElement("td");
      element.setAttribute("colSpan",1);
      element.setAttribute("id",j);
	  element.setAttribute("border","1px");
      currenttext = document.createTextNode("");
      element.appendChild(currenttext)
      addEvent(element, 'mousedown', sel_mousedown, false);
      addEvent(element, 'mouseup', sel_mouseup, false);
	  addEvent(element, 'dblclick', sel_dblclick,false);
      cellule.parentNode.insertBefore(element,celluleproch);
      j=j+1;
   }
}
}

mais il y a un prob avec ie qui me créer bien les cellules mais supprime les bordure

20/04/2007, 09h30
SpaceFrog

Code:

element.style.border="solid 1px black";

Voir 40 message(s) de cette discussion en une page