Déplacer les lignes de tableaux

**linar009** · 03/08/2006, 12h57

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** · 03/08/2006, 15h17

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** · 03/08/2006, 15h27

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 ?