Intervertir deux lignes d'un tableau

Version imprimable

15/01/2007, 14h51
metalcoyote

Intervertir deux lignes d'un tableau

Bonjour,

Je cherche a faite une petite fonction JS qui permet de monter et descendre des lignes dans un tableau html (avec des buton Up/Down). Ca doit etre assez simple à faire mais j'arrive pas a trouver un bon script.

Merci.
Seb.
15/01/2007, 14h52
SpaceFrog

avec le DOM et insertBefore ...
15/01/2007, 15h18
metalcoyote

j'arrives pas a le faire marcher :aie:
15/01/2007, 15h24
SpaceFrog

file le code ...

Code:

1
2
3
4
5
6
7
8
9
10
 
function Up(idligne){
 
   myTR = $(idligne);
   var indexEnCours = myTR.rowIndex;
 
   if(indexEnCours > 2) {
    var previousRow = document.getElementById('tableau').rows[indexEnCours - 1];
    $(tableau).insertBefore(previousRow,myTR);
}

bon voilà un exemple ...

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
44
45
46
</head>
<script type='text/javascript'>
 
function Tableau(){
 
var Tab=document.createElement('table');
 
var TabB=document.createElement('tbody');
for (i=0;i<10;i++){
						var TabL=document.createElement('tr');
						TabL.id="ligne_"+i
							for(j=0;j<5;j++){
												var TabC=document.createElement('td')
												TabC.innerHTML=i+'_'+j;
												TabC.style.border="solid 1px black"
												TabC.indiceLigne=i
												//TabC.onclick=function(){alert(this.indiceLigne)}
												TabC.ondblclick=function(){swapline(this)}
												TabL.appendChild(TabC)
												}
					TabB.appendChild(TabL)
					}							
 
	Tab.appendChild(TabB)
	document.body.appendChild(Tab)
}
 
 
function swapline(ligne){
var ActiveLineNr=Number(ligne.parentNode.id.split('_')[1])
var ActiveLine= document.getElementById('ligne_'+ActiveLineNr)
var TempLine=ActiveLine.cloneNode(true)
 
var PreviousLineNr=Number(ActiveLineNr-1)
var PreviousLine = document.getElementById('ligne_'+PreviousLineNr)
 
ligne.parentNode.parentNode.insertBefore(TempLine,PreviousLine)
ligne.parentNode.parentNode.removeChild(ActiveLine)
}
 
</script>
 
<body onload="Tableau()">
 
 
</body>

par cpontre si quelqu'un peut me dire pourquoi je ne peut swapper qu'eun fois une ligne ... malgré le cloneNode true les évènements dynamiques ne sont pas reproduits ?

15/01/2007, 16h37
metalcoyote

oui effectivement je viens de tester et au bout d'une moment ca swap plus...
15/01/2007, 16h40
SpaceFrog

lol y'a vraiment des fois je suis très con !!!

c'est normal puisque je ne modifie pas les id ...
le previsous Node étant calculé à partir du split - 1 ...
15/01/2007, 16h53
metalcoyote

sinon ya ca:
SWAP

ce qui nous donne:

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
44
45
46
47
48
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
<script type='text/javascript'>
 
function Tableau(){
 
var Tab=document.createElement('table');
 
var TabB=document.createElement('tbody');
for (i=0;i<10;i++){
						var TabL=document.createElement('tr');
						TabL.id="ligne_"+i
							for(j=0;j<5;j++){
												var TabC=document.createElement('td')
												TabC.innerHTML=i+'_'+j;
												TabC.style.border="solid 1px black"
												TabC.indiceLigne=i
												//TabC.onclick=function(){alert(this.indiceLigne)}
												TabC.ondblclick=function(){swapline(this)}
												TabL.appendChild(TabC)
												}
					TabB.appendChild(TabL)
					}							
 
	Tab.appendChild(TabB)
	document.body.appendChild(Tab)
}
 
 
function swapline(ligne){
var AllLines=ligne.parentNode.parentNode.getElementsByTagName('tr')
var ActiveLine=ligne.parentNode.rowIndex
var PreviousLine=AllLines[ActiveLine-1]
 
 
ligne.parentNode.parentNode.insertBefore(ligne.parentNode,PreviousLine)
}
 
</script>
 
<body onload="Tableau()">
 
 
</body>