Déplacer les lignes de tableaux

Version imprimable

03/08/2006, 12h57
linar009

Déplacer les lignes de tableaux

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.
03/08/2006, 15h17
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:

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

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:

1 2 <td class='bouton_readd'>...</td>
et dans le css qqch du genre:
Code:

1 2 3 table.actifs td.bouton_readd { display: none; } table.inactifs td.bouton_readd { display: table-cell; }
A tester
03/08/2006, 15h27
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 ?
03/08/2006, 15h41
linar009

Je viens d'essayer ça ne fonctionne pas : la ligne reste grisée ...:( :arf:
03/08/2006, 16h07
pit9.76
quand tu fais ton appendChild tu lui passe une cellule (ton td) en parametre non ?
Code:

1 2 ton_tr.appendChild(ton_td);
donc avant l'appenChild tu change le backgroundcolor de ton_td :
Code:

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...
03/08/2006, 16h32
linar009

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

Et pourquoi cloneNode ne marche pas sur IE ?
03/08/2006, 17h19
pit9.76

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

Dans mon script JS :

Code:

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:

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

04/08/2006, 13h48
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.

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

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

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:

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:

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>

07/08/2006, 10h20
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:

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:

1 2 <tr id='nouvel_id'><td>...</td>...</tr>
Alors tu peux simplement insérer ta ligne ainsi:
Code:

1 2 3 4 5 function creerLigne (reponseText) { var newTr = html2dom(responseText); document.getElementById('myTable').appendChild(newTr); }
07/08/2006, 10h27
avogadro

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

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:

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:

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.