Listing <tr> dynamiquement via Jquery

Version imprimable

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:

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:

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.

01/05/2012, 15h52
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.
03/05/2012, 13h42
doncho23

Citation:

Envoyé par 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.

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.
03/05/2012, 19h06
SpaceFrog

tu parles de filtrer un tableau ?
http://javascript.developpez.com/faq...er#FiltreTable
04/05/2012, 17h13
doncho23

Citation:

Envoyé par SpaceFrog

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.
07/05/2012, 14h01
doncho23

Citation:

Envoyé par SpaceFrog

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. :aie:

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

Merci pour votre aide.

Greg.

Bonjour,

Voici une approche :

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
		$(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:

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>

08/05/2012, 16h36
doncho23

Salut Golgotha,

J'ai essayé ton code.
Mais tu initialise 3 variables : oin, oaut, buffer;
Tu n'utilise pas buffer, ni oaut.

Je ne comprend donc pas trop.
Et cela ne me donne rien.

Saurais-tu commenter ou m'expliquer.

Merci de l'attention que tu portes à mon problème.

Greg.

Bonjour,

Je reviens vers vous car j'ai réalisé l'entièreté de mon site mais il me manque toujours cette fonctionnalité pour qu'il soit utilisable et je n'arrive pas à la mettre en place.
Je n'arrete pas de me casser les dents sur ce problème ! :aie:

Donc je récapitule.
J'ai créé une base de données dans laquelle l'admin peut insérer des articles qui seront ajouté à l'affichage sur le site.

Sur la page admin nous avons l'apercu des articles déjà dans la DB (Chaque article représente une ligne du tableau).
Ici : http://donchofolio.be/test/admin/admin.php

J'ai ajouté sur le coté un champ avec l'emplacement initial de l'élément sous forme de nombre.

Lorsque le focus est dans le champ le bouton s'active.

J'essaye d'arriver à ce que lorsque l'utilisateur change le nombre de l'article et clique sur "changer l'ordre" (La table "ordre" dans la DB soit modifiée et le "tr" contenant les infos ce place en position choisie).

Voici le code de ma page :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 		<script type="text/javascript" src="../js/jquery.min.js"></script>
 		<script type="text/javascript">
 
		$(document).ready(function(){
			$('.chang_ordre_focus').focusin(function() {
				$('.chang_ordre').attr("disabled","disabled");
  				$(this).next().removeAttr("disabled");
  			});	
		});
 
        function change(id){ 
 			if(id==$("#input"+id).val()){
 				alert('Vous n\'avez pas changé le nombre de l\'élément.');
 			}else{
				alert('Vous avez bien donné un nouvel ordre.');
 
 			}
        }
 
		</script>
 
    </head>
    <body>
        <?php                   
                        $requeteselect = 'SELECT * FROM article ORDER BY ordre';
            $result = mysql_query($requeteselect) or die ("La base de donnée est inaccessible");
 
                                echo "<table summary=\"Liste des articles\">
                                <tr>
                                        <th>Id</th>
                                        <th>Marque</th>
                                        <th>Modèle</th>
                                        <th>Ordre</th>
                                </tr>";
                                
            while($article_courant =  mysql_fetch_assoc($result)){
                        $requeteselect = 'SELECT COUNT(*) FROM caracteristiques WHERE caracts_id=\''.$article_courant['Id'].'\'';
                                                                
                                        $result2 = mysql_query($requeteselect) or die("La base de donnée est inaccessible");
                                $nbItems = mysql_fetch_array($result2);
                                $nbItems = $nbItems[0];
                                
                echo '<tr id="'.$article_courant['ordre'].'">
                                                <td>'.$article_courant['Id'].'</td>
                                                <td>'.$article_courant['marque'].'</td>
                                                <td>'.$article_courant['modele'].'</td>
                                                <td class="lordre"><input maxlength="10" size="5" type="text" class="chang_ordre_focus" name="input'.$article_courant['ordre'].'" id="input'.$article_courant['ordre'].'" value="'.$article_courant['ordre'].'" /><input onclick="change('.$article_courant['ordre'].');" disabled="disabled" class="chang_ordre" type="button" value="Changer l\'ordre"/></td>
                                         </tr>';
            }
                        ?>
		</table>
 
 		<?php
        if(!empty($erreurs)){
                echo '<script type="text/javascript">alert("'.$erreurs.'")</script>';
                }
                mysql_close($connect);
        ?>
    </body>
</html>

J'espère être assez clair et j'espère que vous saurez me diriger vers une solution.

Merci et bonne journée.

Greg.

30/05/2012, 11h40
Piflo

tu t'es renseigner sur le pluging DataTables de jquery ? (http://datatables.net/)

il permet de créer efficacement des tableau ou ut peu ajouté dynamiquement de nouvelle ligne, trier par colonne (en spécifiant même ta méthode de tri), ...

j'ai déjà fait des tableau avec, mais je n'ai pas tester avec cellule éditable, mais sa existe. ;)

j'édite mon post dé que je trouve un lien plus approprié.
édite : http://datatables.net/examples/api/editable.html
30/05/2012, 11h47
doncho23

Citation:

Envoyé par Piflo

tu t'es renseigner sur le pluging DataTables de jquery ? (http://datatables.net/)

il permet de créer efficacement des tableau ou ut peu ajouté dynamiquement de nouvelle ligne, trier par colonne (en spécifiant même ta méthode de tri), ...

j'ai déjà fait des tableau avec, mais je n'ai pas tester avec cellule éditable, mais sa existe. ;)

j'édite mon post dé que je trouve un lien plus approprié.
édite : http://datatables.net/examples/api/editable.html

Merci, j'attend de tes nouvelles.
Et non je ne connaissais pas ce plugin.
Mais oui après il faut voir si c'est possible avec colonne éditable et aussi pouvoir facilement mettre a jour la DB.

C'est aussi ca mon soucis.
D'une part pouvoir changer la position des elements dans le tableau mais parallelement changer les valeur de la table "ORDRE".
Valeur similmaire à celle dans le champ éditable.

Enfin je ne sais pas si je suis clair. :?

En tout cas merci de t'y intéresser. ;)
30/05/2012, 11h56
Piflo

euh tu as vu le lien d'exemple a la fin du post?

je pense avoir juste tilter un truc, tu veut aussi réorganiser l'ordre des colonnes?
30/05/2012, 12h11
doncho23

Ha oui je viens de le voir.
Je suis au travail donc je n'ai pas le temps de bien regarder.

En fait comme je le disais :
1 article = 1 ligne.

Donc la réorganisation ce fait uniquement sur les ligne.

Et ensuite en parallele je dois mettre à jours la DB à savoir la table "ordre".
C'est sur cette valeur que je trie l'ordre des elements en faisant ma requete SQL.