Ordre des lignes dans un tableau

[stomerfull]

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

[SpaceFrog]

TableSort, JQgrid ....

[stomerfull]

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

[galerien69]

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

[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 ?

[galerien69]

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.

[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

[danielhagnoul]

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/