Discussion :

[linar009]

Bonjour,

Voilà mon problème:
J'ai, sur la même page deux tableaux différents. Un contenant les articles commandés en cours et l'autre en dessous contenant les articles supprimés de la commande.
Les articles contenus dans le preimier tableau sont actifs et donc, par conséquent, les lignes du tableau ont un background vert et un <TD> de plus à la fin de la ligne. Les articles dans le tableau des refus sont, quant à eux, inactifs, et donc de couleur grise avec un <TD> de moins que le tableau ci-dessus.
Le problème est que dans le tableau des refus j'ai un bouton "READD" qui permet de réintégrer un article refusé dans la liste des articles actifs. Or, je passe tout le site en AJAX (mise à jour dynamique sans rechargement de la page) et je voudrais réintégrer cette ligne dans le tableau du dessus avec la couleur verte et le <TD> en plus. Pour le moment, j'arrive bien à réintégrer la ligne dans le tableau mais cette dernière reste grise et avec un <TD> de moins.

Avez-vous une idée ?

Merci.

[marcha]

Salut,

Pour la couleur, le plus simple serait d'affecter ça avec un style css basé
sur le tableau auquel la ligne appartient. par exemple:

Code :

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

1
2
3
4
5
6
7
 
<table class='actifs'>
...
</table>
<table class='inactifs'>
...
</table>

le css:

Code :

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

1
2
3
 
table.actifs td { background-color: ... }
table.inactifs td { background-color: ... }

Ceci t'évitera de devoir gérer les couleurs quand tu déplaces tes lignes

Maintenant en ce qui concerne l'ajout / suppression de td entre les deux
tableaux je vois deux solutions:

1) quand tu déplace ta ligne avec removeChild, appendChild tu pourrais
faire un removeChild du td en trop. Mais il faut le stocker qqpart.
Tu peux le stocker dans un attribut d'un autre td dans le dom pour éviter
de créer un tableau javascript pour mémoriser ça.

2) tu attribues des classes css aux celulles, par exemple:

Code :

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

1
2
 
<td class='bouton_readd'>...</td>

et dans le css qqch du genre:

Code :

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

1
2
3
 
table.actifs td.bouton_readd { display: none; }
table.inactifs td.bouton_readd { display: table-cell; }

A tester

[linar009]

Tu es sûr que les propriétés CSS s'appliqueront d'elles-mêmes sur la ligne qui vient d'arriver dans le tableau par l'intermédiaire d'un removeChild, appendChild ?

[linar009]

Je viens d'essayer ça ne fonctionne pas : la ligne reste grisée ...

[pit9.76]

quand tu fais ton appendChild tu lui passe une cellule (ton td) en parametre non ?

Code :

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

1
2
 
ton_tr.appendChild(ton_td);

donc avant l'appenChild tu change le backgroundcolor de ton_td :

Code :

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

1
2
 
ton_td.bgColor = "ta_couleur";

P.S. : a verifier la syntaxe "bgColor" je suis pas certain que ce soit ça mais il y a de grnades chances...

[linar009]

Oui mais est-ce que getElementById('') renvoie bien un noeud (node) ?
Je crois que le problème vient de là, non?

[linar009]

Et pourquoi cloneNode ne marche pas sur IE ?

[pit9.76]

peut etre que si tu postais ton code notemment a l'endroit ou se fait appendChild cela nous aiderait...

[linar009]

Dans mon script JS :

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
function duplic_trait(plan_seq,id_org,plan_date,ligne){
    var mytool_array=plan_date.split("-");
	var pd = mytool_array[0] + mytool_array[1] + mytool_array[2];	
   try {
        var xhr=getXhr();
        xhr.open("GET","../../includes/page.php?act=duplicTrait&IdOrg=" + id_org + "&planSeq=" + plan_seq + "&planDate=" + pd, false);
		xhr.send(null);        
        if(xhr.readyState == 4 && xhr.status == 200){				
			tableau = document.getElementById('tableauPlanif');
			duplic = ligne.cloneNode(true);		
 
            tableau.insertBefore(duplic,ligne);								
        } else {
            alert("Suppression de ligne impossible: le serveur renvoie une erreur:" + xhr.responseText);
        }
    } catch (ex) {
        alert("Suppression de ligne impossible: " + ex.message);
    }
}

Sur ma page PHP :

Code :

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

echo "&nbsp;&nbsp;<IMG alt='Dupliquer le traitement' SRC=\"../../images/clone.gif\" onclick=\"duplic_trait('".$row['plan_seq']."','" . $urssaf . "','" . $dplan . "',document.getElementById('" . $numLigne ."'));\" STYLE='CURSOR:hand'><br>";

Sachant que ma ligne (<TR>) a pour id $numLigne
en gros : <TR id='1'>...
<TR id='2'>...
<TR id='3'>...

[linar009]

A mon avis c'est cloneNode qui fout la m****, non?
Existe-t-il un autre moyen de cloner ou copier un noeud ou un élément?

Merci.

[marcha]

Linar, test voir ceci pour voir si ça ressemble à qqch qui peut te servir,
clique sur les lignes vertes et jaunes pour tester.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type='text/css'>
table { border-collapse: collapse; width: 500px; }
th { background-color: #ccc; }
td, th { border: 1px solid #999; }
#actifs tr td { background-color: #0f0; }
#inactifs tr td { background-color: #ff0; }
</style>
<script language='javascript' type='text/javascript'>
function move(e) {
	var tbody = e.parentNode;
	var cible = document.getElementById( tbody.id=='actifs' ? 'inactifs' : 'actifs' );	
	cible.appendChild(tbody.removeChild(e));
}
</script>
</head>
<body>
<table>
<thead>
<tr><th>Titre col 1</th><th>Titre col 2</th></tr>
</thead>
<tbody id='actifs'>
<tr onclick='move(this);'><td>Ligne 1, col 1</td><td>Ligne 1, col 2</td></tr>
<tr onclick='move(this);'><td>Ligne 2, col 1</td><td>Ligne 2, col 2</td></tr>
<tr onclick='move(this);'><td>Ligne 3, col 1</td><td>Ligne 3, col 2</td></tr>
</tbody>
</table>
 
<table>
<thead>
<tr><th>Titre col 1</th><th>Titre col 2</th></tr>
</thead>
<tbody id='inactifs'>
</tbody>
</table>
 
</body>
</html>

[linar009]

Ok merci Marcha, ça marche impeccable...
Par contre, maintenant, j'essaie d'insérer une ligne dans le même tableau et je n'y parviens pas.
Je récupère bien les données à insérer dans un tableau, mais l'insertion dynamique de la ligne dans le tableau ne se produit pas.

Je fais comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
function creerLigne (reponseText) {
	var mytool_array=reponseText.split("|");
	var newTr = document.getElementById('1').cloneNode(true);
	newTr.children(0).innerHTML = mytool_array[0];
	newTr.children(1).innerHTML = mytool_array[1];
	newTr.children(2).innerHTML = mytool_array[2];
	newTr.children(3).innerHTML = mytool_array[3];
	newTr.children(4).innerHTML = mytool_array[4];
             document.getElementById('myTable').appendChild(newTr);
}

précision : reponseText correspond à mon XHR.responseText

Ma page PHP est construite de la façon suivante :

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
<TABLE id='myTable'>
   <TR id='1'>
        <TD> 56
        </TD>
        <TD> azeetry
        </TD>
        <TD> 24
        </TD>
        <TD> 77777
        </TD>
   </TR>
   <TR id='2'>
        <TD> 999
        </TD>
        <TD> azeetry
        </TD>
        <TD> 1
        </TD>
        <TD> 66666
        </TD>
   </TR>
   <TR id='3'>
        <TD> 78
        </TD>
        <TD> azeetry
        </TD>
        <TD> 25
        </TD>
        <TD> 55555
        </TD>
   </TR>
</TABLE>

[marcha]

Salut,

Je pense qu'il serait plus simple que ton php produise
directement le code html à insérer car quand tu clone
ta ligne, tu clone aussi l'id et tu te retrouve avec deux
id identiques !

voici une petite fonction utilitaire que je trouve très pratique:

Code :

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

1
2
3
4
5
6
 
function html2dom(html) {
	var temp = document.createElement('div');
	temp.innerHTML = html;
	return temp.removeChild(temp.firstChild);
}

Elle transforme un petit morceau de html en un élément insérable

Si ton php retourne toute la ligne, c'est à dire le code suivant:

Code :

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

1
2
 
<tr id='nouvel_id'><td>...</td>...</tr>

Alors tu peux simplement insérer ta ligne ainsi:

Code :

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

1
2
3
4
5
 
function creerLigne (reponseText) {
  var newTr = html2dom(responseText);
  document.getElementById('myTable').appendChild(newTr);
}

[avogadro]

quand tu aurais fini met le résultat entier ici stp ^^

[linar009]

Merci Marcha, mais en cherchant j'ai trouvé la solution à mon problème.
Le problème c'est que pour effectuer un appendChild il faut un tbody dans la table :

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
<TABLE id='myTable'>
<TBODY>
   <TR id='1'>
        <TD> 56
        </TD>
        <TD> azeetry
        </TD>
        <TD> 24
        </TD>
        <TD> 77777
        </TD>
   </TR>
   <TR id='2'>
        <TD> 999
        </TD>
        <TD> azeetry
        </TD>
        <TD> 1
        </TD>
        <TD> 66666
        </TD>
   </TR>
   <TR id='3'>
        <TD> 78
        </TD>
        <TD> azeetry
        </TD>
        <TD> 25
        </TD>
        <TD> 55555
        </TD>
   </TR>
</TBODY>
</TABLE>

Ensuite le code JS est le suivant tout simplement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function creerLigne(reponseText) {
	var mytool_array=reponseText.split("|");
	var table = document.getElementById('myTable');
	var tbody = table.tBodies[0];	
 
	var newTr = tbody.rows[0].cloneNode(true);
 
	newTr.childNodes(0).innerHTML = mytool_array[0];
	newTr.childNodes(1).innerHTML = mytool_array[1];
	newTr.childNodes(2).innerHTML = mytool_array[2];
	newTr.childNodes(3).innerHTML = mytool_array[3];
	newTr.childNodes(4).innerHTML = mytool_array[4];
	table.tBodies[0].appendChild(newTr);
}

Ca fonctionne impeccable!
Ta solution était très intéressante Marcha, mais celle-là m'intéresse davantage puisque je suis quitte de remodifier une grande partie de mon code.