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>