Deplacement de titre dans une table HTML

oioou · 06/12/2011, 13h37

Bonjour,j'ai un petit souci pour l'ordre de function.
L'objective est d'un simple click suffisant pour dépalcer la titre de la table de haut en bas. Le script fonctionne bien,mais le problème c'est que le résultat ne dure qu'un seconde

titre.html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title >Dépalcement de titre</title>
<script type="text/javascript" src="titre.js"></script>
</head>
<body>
<form>
<table id="t1" border="1">
<tr>
<th>titre1</th>
<th>titre2</th>
</tr>
<tr>
<td>L1C1</td>
<td>L1C2</td>
</tr>
<tr>
<td>L2C1</td>
<td>L2C2</td>
</tr>
<tr>
<td>L3C1</td>
<td>L3C2</td>
</tr>
<tr>
<td>L4C1</td>
<td>L4C2</td>
</tr>
<tr>
<td>L5C1</td>
<td>L5C2</td>
</tr>
</table>
<input type="submit" value="Déplacer" >
</form>
 
</body>
</html>

titre.js

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
 
 
function soumettre() {
	var table = document.getElementsByTagName("tr");
	var titre = document.getElementsByTagName("th");
    var newTitre = table[0].cloneNode(true);
    table[0].parentNode.removeChild(table[0]);
    table[0].parentNode.appendChild(newTitre);
 
}
 
window.onload = function() {
       document.forms[0].onsubmit = soumettre;
}
 
/*window.onload = function() {
	var table = document.getElementsByTagName("tr");
	var titre = document.getElementsByTagName("th");
    var newTitre = table[0].cloneNode(true);
    table[0].parentNode.removeChild(table[0]);
    table[0].parentNode.appendChild(newTitre);	
}*/

jreaux62 · 07/12/2011, 12h50

Bojnour,
c'est normal puisque tu "soumets" le formulaire ("submit") : la page est ré-affichée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function soumettre() {
	var table = document.getElementsByTagName("tr");
	var titre = document.getElementsByTagName("th");
	var newTitre = table[0].cloneNode(true);
	table[0].parentNode.removeChild(table[0]);
	table[0].parentNode.appendChild(newTitre);
}
</script>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="Déplacer" onclick="soumettre();"/>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email