Discussion :

[doncho23]

Bonjour,

J'aimerais arrivé à changer l'ordre d'éléments (des <tr> dans un tableau) en spécifiant le nombre dans l'input et après la pression du bouton test.

http://donchofolio.be/test/index.html

Le Javascript (Jquery) :

Code :

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

1
2
3
4
5
6
7
8
$('input[type="text"]').focusin(function(){
    $(this).next().removeAttr("disabled");
   // $("#result").append($(this).attr("id") + "<br />");
})
 
$('input[type="text"]').focusout(function(){
    $(this).next().attr("disabled", "disabled");
})

Le 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
<table>
<tr>
    <th>L'ordre</th>
    <th>L'élément</th>
</tr>
<tr>
    <td><input type="text" name="input1" id="input1" value="1"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 1</td>
</tr>
<tr>
    <td><input type="text" name="input2" id="input2" value="2"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 2</td>
</tr>
<tr>
    <td><input type="text" name="input3" id="input3" value="3"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 3</td>
</tr>
<tr>
    <td><input type="text" name="input4" id="input4" value="4"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 4</td>
</tr>
<tr>
    <td><input type="text" name="input5" id="input5" value="5"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 5</td>
</tr>
<tr>
    <td><input type="text" name="input6" id="input6" value="6"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 6</td>
</tr>
<tr>
    <td><input type="text" name="input7" id="input7" value="7"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 7</td>
</tr>
<tr>
    <td><input type="text" name="input8" id="input8" value="8"/><input type="button" disabled="disabled" value="test" /></td>
    <td>Le 8</td>
</tr>
</table>​

C'est dans l'optique de récupérer les éléments et les mettre à jours dans la base de donnée.

Sauriez vous me mettre sur la piste.

Merci d'avance.

Greg.

[utopman]

Bonjour,

tu peux t'orienter vers ce genre de chose
table dynamique
et récupérer les évènements pour donner les bons numéros de ligne à tes éléments pour la base de données.
En plus d'être simple a mettre en place, c'est bien plus efficace pour l'utilisateur, et ça évite beaucoup d'erreurs je pense.

[doncho23]

Bonjour,

tu peux t'orienter vers ce genre de chose
table dynamique
et récupérer les évènements pour donner les bons numéros de ligne à tes éléments pour la base de données.
En plus d'être simple a mettre en place, c'est bien plus efficace pour l'utilisateur, et ça évite beaucoup d'erreurs je pense.

Merci pour ta réponse,

le soucis c'est que ce n'est pas pratique lorsque l'on a bcp d'éléments dans le tableau ou lorsque l'on a un multipage.

Donc c'est pour cela que la numérotation me semblait plus pratique.

[SpaceFrog]

tu parles de filtrer un tableau ?
http://javascript.developpez.com/faq...er#FiltreTable

[doncho23]

tu parles de filtrer un tableau ?
http://javascript.developpez.com/faq...er#FiltreTable

Merci,

Je vais regarder cela ce soir en rentrant.
Je vous tiens au courant.

Greg.

[doncho23]

tu parles de filtrer un tableau ?
http://javascript.developpez.com/faq...er#FiltreTable

J'ai regardé ce que tu m'as envoyé.
Mais cela ne correspond pas à ce que je recherche.

Mon but ici est de mettre un nombre dans l'input texte dans un <tr> quelconque puis presser sur le bouton "test" correspondant.

Ce qui aura pour but de placer l'élément à la 5 eme place si je met le nombre 5 et donc de décaller tout les <tr> suivant de 1 ainsi que celui qui était initialement en position 5.

Je ne sais pas si je me fais bien comprendre.

Mais je me casse les dents depuis plus d'une semaine...

Merci pour votre aide.

Greg.

[Golgotha]

Bonjour,

Voici une approche :

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
		$(document).ready(function(){
 
			$('.chang_ordre_focus').focusin(function() {
				$('.chang_ordre').attr("disabled","disabled");
  				$(this).next().removeAttr("disabled");
  			});	
 
		});
 
		var oin, oaut, buffer;
 
		function change(id){
 
			cin = (id*2)-1;
			cout = ($("#input"+id).val()*2)-1; 
 
		   oin = $($("table tbody tr td")[cin]).clone();
		   oout = $($("table tbody tr td")[cout]).clone();
		   $($("table tbody tr td")[cin]).replaceWith(oout);
		   $($("table tbody tr td")[cout]).replaceWith(oin);
 
 
			return false;
 
		}

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
<body>
		<table>
			<tbody><tr>
    			<th>L'ordre</th>
    			<th>L'élément</th>
			</tr>
			<tr id="1">
    			<td><input type="text" class="chang_ordre_focus" name="input1" id="input1" value="1"><input onclick="change(1); return false;" class="chang_ordre" type="button" value="test"></td>
    			<td>Le 1</td>
			</tr>
			<tr id="2">
    			<td><input type="text" class="chang_ordre_focus" name="input2" id="input2" value="2"><input onclick="change(2);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 2</td>
			</tr>
			<tr id="3">
    			<td><input type="text" class="chang_ordre_focus" name="input3" id="input3" value="3"><input onclick="change(3);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 3</td>
			</tr>
			<tr id="4">
    			<td><input type="text" class="chang_ordre_focus" name="input4" id="input4" value="4"><input onclick="change(4);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 4</td>
			</tr>
			<tr id="5">
    			<td><input type="text" class="chang_ordre_focus" name="input5" id="input5" value="5"><input onclick="change(5);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 5</td>
			</tr>
			<tr id="6">
    			<td><input type="text" class="chang_ordre_focus" name="input6" id="input6" value="6"><input onclick="change(6);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 6</td>
			</tr>
			<tr id="7">
    			<td><input type="text" class="chang_ordre_focus" name="input7" id="input7" value="7"><input onclick="change(7);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 7</td>
			</tr>
			<tr id="8">
    			<td><input type="text" class="chang_ordre_focus" name="input8" id="input8" value="8"><input onclick="change(8);" class="chang_ordre" type="button" disabled="" value="test"></td>
    			<td>Le 8</td>
			</tr>
		</tbody></table>​
 
</body>