réordonner un tableau créé dynamiquement

**beyo** · 24/02/2009, 20h58

Bonjour à tous.

J'écris une petite application en javascript : je crée ( ajouteEltNew ) et efface ( supprimeEltNew ) dynamiquement des lignes dans un tableau ( listeEltNew ). Celà fonctionne bien. Mais je voudrais avoir la possibilité de changer la position des lignes (getup, getdown), mais aussi que l'indiçage soit mis à jour.

Je peux avoir des trous dans mes indices car je peux effacer des lignes dynamiquement

Par exemple, si j'ai :

tr0 => blabla
tr2 => bleble
tr6 => blibli
tr7 => bloblo

si je monte la ligne tr 6 d'un rang (à la deuxième place)

je veux avoir :

tr0 => blabla
tr2 => blibli
tr6 => bleble
tr7 => bloblo

Pourriez-vous m'aider à résoudre ce problème ? Merci d'avance.

Je vous donne le code que j'ai :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>Réordonner un tableau</title>
<script type="text/javascript">
//<![CDATA[
var inc_e=0;
//Ajoute des lignes pour les documents
function ajouteEltNew(incval, nom)
{
	if (incval > 0 && inc_e == 0){inc_e = incval;}
	var leparent = document.getElementById("listeEltNew");
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
	var td3 = document.createElement('td');
 
	leparent.appendChild(tr);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
 
	tr.id = "idN"+inc_e;
	tr.setAttribute('id', "idN"+inc_e);
 
	td1.innerHTML = '<a onclick="getup('+inc_e+')" class="upElt">up</a>--'
	+'<a onclick="getdown('+inc_e+')" class="downElt">down</a>';
	td2.innerHTML = '<input name="elt'+nom+inc_e+'" type="text" id="elem'+inc_e+'" size="15" />&nbsp;'
	+'<input type="hidden" name="valeur[]" value="'+inc_e+'" />';
	td3.innerHTML = '<a href="#'+nom+'" onclick="supprimeEltNew(\''+inc_e+'\', \''+nom+'\');\">Supprimer elt '+inc_e+'<\/a>';
	inc_e++;
}
 
function supprimeEltNew(incval, nom)
{
	var leparent = document.getElementById("listeEltNew");
	var letr = document.getElementById("idN"+incval);
	leparent.removeChild(letr);
}
 
function getup(inc)
{
 
}
 
function getdown(elt, inc)
{
 
}
//]]>
</script>
</head>
<body>
 
<a onclick="ajouteEltNew(0, 'texte');">Ajouter</a>
 
<form action="test.htm" method="post" id="choixelemform">
<fieldset>
<table id="tableEltNew"><tbody id="listeEltNew"></tbody></table>
<input type="submit" value="Valider" id="validForm" />
</fieldset>
</form>
</body></html>

**andry.aime** · 25/02/2009, 12h25

Bonjour,
j'avais aussi le même problème que toi, mais enfin j'ai utilisé jQuery pour manipuler un tableau sur lequel je peut ajouter, modifier, supprimer une ligne; et un plugin Tablesorter pour faire un trie selon les colonnes choisies;

**beyo** · 25/02/2009, 18h30

Merci pour ce lien que je ne connaissais pas (mais j'ai déjà trouvé plusieurs autres outil de tri similaire, et mêm un dragn drop qui me replace les lignes comme il faut). Le problème c'est que je ne veux pas TRIER mais REORDONNER : je veux échanger 2 lignes. Dans mon exemple la ligne 2 doit devenir la ligne 6 (son id change) mais le contenu (des champs input et du texte) ne doivent pas changer (bleble reste bleble avec son indice de départ : 2)

J'imagine qu'avec une boucle sur les lignes et un tableau temporaire pour réordonner on pourrait arriver à quelque chose, mais ça me paraît un peu lourdingue comme solution.

En tout cas merci de ton intervention.

Si toi, ou quelqu'un a une autre idée je suis preneur...

**beyo** · 25/02/2009, 22h15

Je suis tombé sur ce code jQueryqui gère les lignes et non les colonnes :

http://www.isocra.com/2007/07/draggi...in-javascript/

et

http://www.isocra.com/2008/02/table-...jquery-plugin/

ça a l'ai de faire exactement ce que je souhaite, et je n'ai plus besoin de mes up / down ...

réordonner un tableau créé dynamiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager