fusionner des cellules d'un tableau

**eyolas** · 16/04/2007, 15h53

Je sais que je suis pénible mais pourrez tu m'indiquer où je pourrais trouver ce fameux nodeCleaner

**SpaceFrog** · 16/04/2007, 16h06

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

**SpaceFrog** · 16/04/2007, 16h15

ce qui simplifie le code comme ceci:

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
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>

**eyolas** · 16/04/2007, 16h28

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

**SpaceFrog** · 16/04/2007, 16h31

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 ...

**SpaceFrog** · 16/04/2007, 16h46

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 ...

**eyolas** · 16/04/2007, 17h10

je suis en train de voir comment je vais faire. Je te tiens au courant.
Si tu as des idées dit le moi.

**SpaceFrog** · 16/04/2007, 17h12

souhaites tu autoriser plusieurs niveaux de regroupements ?

genre

refusionner un groupe de cellulesavec un autre groupe ?

**eyolas** · 16/04/2007, 17h22

Oui je veux faire ca

**SpaceFrog** · 16/04/2007, 17h29

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 ...

**eyolas** · 16/04/2007, 17h35

Vi ca va etre chaud mais bon j'ai pas le choix je dois le faire

**SpaceFrog** · 16/04/2007, 22h09

En y repensant...

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

en concaténant

au départ tu aurais

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

tu fusionnes les deux premiers:

Code :

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

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

tu fusionnes les deux cellules restantes:

Code :

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

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

ensuite un peu de parsing sur les id et tu as ton historique ...

**eyolas** · 17/04/2007, 09h10

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

**SpaceFrog** · 17/04/2007, 09h16

alors attribues un attrubut perso supplémentaire ...

Code :

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

document.getElementById('montd').regroup="((id1+id2)+id3)

**eyolas** · 17/04/2007, 14h02

je ne vois pas comment tu veux que je fasse

**SpaceFrog** · 17/04/2007, 14h08

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)

**eyolas** · 18/04/2007, 15h14

C'est quoi faire un regroup?

**SpaceFrog** · 18/04/2007, 15h30

Un petit exemple

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
<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 ...

**eyolas** · 20/04/2007, 09h19

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

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
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

**SpaceFrog** · 20/04/2007, 09h30

Code :

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

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

fusionner des cellules d'un tableau

JavaScript

Discussions similaires

Partager

Partager