Ordre des lignes dans un tableau

Version imprimable

21/07/2011, 09h38
stomerfull

1 pièce(s) jointe(s)

Ordre des lignes dans un tableau

Bonjour,

j'ai un tableau en fichier joint.

Je voudrais que quand on clique sur up par exemple dans la ligne 2 (Pierre) il prend la place de la ligne 1 (Paul)

Ou

si je clique sur la down sur la ligne 1 (Paul) il prend la place de Pierre ligne 2
et même comportement sur la toute la ligne du table

Ou je veux que la ligne trois se mets à la ligne 1 donc je clique up 2 fois sur la ligne 3

C'est comme changé l'ordre d'affichage (ou ordre de préférence) des lignes

Est ce qu'il est possible de faire ça avec Jquery ou connaissez vous des plugins Jquery qui peut faire ça ?

Merci d'avance pour votre aide
21/07/2011, 09h44
SpaceFrog

TableSort, JQgrid ....

Merci pour votre réponse

j'ai trouvé ça qui marche bien mais j'ai un petit souci

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
$(document).ready(function(){
    $(".up,.down").click(function(){
                var row = $(this).parents("tr:first");
                if ($(this).is(".up")) {
                    row.insertBefore(row.prev());
                } else {
                    row.insertAfter(row.next());
                }
    });
});
 
    $output .= '<table>';
    $output .= '<tr>';
    $output .= '<th scope="col">Name</th>';
    $output .= '<th scope="col">Age</th>';
    $output .= '<th scope="col">Action</th>';
    $output .= '</tr>';
    $i = 1;
    foreach ($a as $b)
    {
 
        $output .= '<tr>';
	    $output .= '<td align="center"><span '.$class_color.'>'.$b["c"].'</span></td>';
        $output .= '<td align="center"><span '.$class_color.'>'.$b["d"].' </span></td>';
        $output .= '<td align="center"><span '.$class_color.'>'.$i.'&nbsp;<a href="#" class="up">up</a> / <a href="#" class="down">down</a></span></td>';
        $output .= '</tr>';
        $i++;
 
    }
$output .= '</table>';

Je ne trouve pas le moyen de faire à ce que si par exemple j'ai 5 résultats
si je clique up sur la cinquième ligne il monte bien sur la 4 ème ligne mais avec l'id = 5 (son rang la variable $i ne change pas ) qui me pose problème

Ce que je veux c'est que si je suis sur la ligne 4 je clique sur up ça monte à la ligne 3 avec id=3 ($i) mais pas 4

Merci pour votre aide

21/07/2011, 13h34
Invité

salut,

Déjà, il faut pas que l'id commence par un nombre. Sinon c'est pas valide. Ca marche mais c'est pas valide. donc m5 c'est mieux...

Ensuite, si tu es sur 4 et que tu up sur 3, alors à la troisième ligne si tu mets l'id 3, il faut mettre la quatrième ligne (qui était la 3eme) à jour cad lui mettre l'id 4.

Donc tu n'as qu'à faire une deuxième passe : lorsque tu as uppé ta ligne à la ligne 3, pour toutes les lignes depuis la troisieme a la derniere, tu leurs mets respectivement 3, 4,...etc
21/07/2011, 14h47
stomerfull

Pas très compris pour la non validité de l'id en nombre

Parce que les données avec les id(1,2,3) je vais les récupérer pour les stocker en base.

Une deuxième passe ? c'est je dois renuméroté les colonnes ?
21/07/2011, 15h18
Invité

cque je veux dire avec les id, c'est que en html d'après le w3C (de mémoire xhtml) les id doivent pas commencer par des chiffres. C'est comme ca. Si tu respectes pas tant pis ca marchera quand même, si tu respectes, ben c'est mieux.

Pour ce qui est de la duexième passe, on parle de ligne.
si avant tu as
1
2
3
4

et que tu décides de faire passer la ligne 4 au dessus, tu as
1
2
4
3

Si tu renommes maintenant l'id de la ligne 3 en 3, tu obtiens
1
2
3
3

et tu vois que ya deux id identiques.

La deuxieme passe a donc pour but de rendre les id différents.

Une remarque toutefois, à partir du moment ou l'id c'est la position du numéro de la ligne, ya pas grand intérêt à attribuer un id à la ligne.
21/07/2011, 15h44
stomerfull

oui 'id c'est la position du numéro de la ligne mais je dois le récupérer pour une utilisation ultérieur et c'est la le souci
l'attribution du bon numéro de ligne pour les lignes déplacés

Bonsoir

On n'a pas besoin d'un ID (qui doit toujours être unique et toujours commencer par un caractère alphabétique W3C HTML4) pour récupérer la position d'une ligne dans le "tbody" d'une "table".

On ne doit pas multiplier les ID sans un bon motif, car ils ralentissent le traitement du DOM.
Code:

1 2 3 4 5 6 7 8 9 10 11 // de 0 à m = $("#maTable").children("tbody").children("tr").length - 1 var n = 2; // ligne n du tbody $("#maTable > tbody > tr").eq(n).children("td").css("background-color", "lightgreen"); // au clic sur une cellule de la table (td) // on trouve le numéro (0 à m) de la ligne (tr parent de td) $("#maTable > tbody").click(function(e){ console.log( $("#maTable > tbody > tr").index( $(e.target).parent() ) ); });
Voir : http://api.jquery.com/index/