Déplacer des cellules dans un tableau

Version imprimable

Bonjour,

Je cherche un moyen de déplacer une ou plusieurs cellules (style+contenu) via jQuery d'un endroit à un autre dans un tableau via un drag&drop.

Voir exemple de mon tableau :

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
 
<table class="reservation" id="table_reservation">
        <thead>
            <tr class="entete">
                <td class="">&nbsp;</td>
                <td id="1_32" style="background-color: #CCC; width:1000px;">Terrain 1</td>
                <td id="1_33" style="background-color: #CCC; width:1000px;">Terrain 2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="0800" class="">08:00</td>
                <td id="32_0800" axis="0" abbr="5_1_2013-05-03_1" name="1_1" class="notallowed"></td>
                <td id="33_0800" axis="0" abbr="5_1_2013-05-03_1" name="1_2" class="notallowed"></td>
            </tr>
            <tr>
                <td id="0900">09:00</td>
                <td id="32_0900" axis="0" abbr="5_1_2013-05-03_1" name="2_1" class="notallowed"></td>
                <td id="33_0900" axis="0" abbr="5_1_2013-05-03_1" name="2_2" class="notallowed"></td>
            </tr>
            <tr>
                <td id="1000">10:00</td>
                <td id="32_1000" axis="0" abbr="5_1_2013-05-03_1" name="3_1" class="notallowed"></td>
                <td id="33_1000" axis="0" abbr="5_1_2013-05-03_1" name="3_2" class="notallowed"></td>
            </tr>
            <tr>
                <td id="1100">11:00</td>
                <td id="32_1100" axis="0" abbr="5_1_2013-05-03_1" name="4_1" style="background-color: rgb(255, 0, 153);" class="notallowed">Cette case à déplacer</td>
                <td id="33_1100" axis="0" abbr="5_1_2013-05-03_1" name="4_2" class="notallowed"></td>
            </tr>
            <tr>
                <td id="1200">12:00</td>
                <td id="32_1200" axis="0" abbr="5_1_2013-05-03_1" name="5_1" class="notallowed"></td>
                <td id="33_1200" axis="0" abbr="5_1_2013-05-03_1" name="5_2" class="notallowed"></td>
            </tr>
            <tr>
                <td id="1300">13:00</td>
                <td id="32_1300" axis="0" abbr="5_1_2013-05-03_1" name="6_1" class="notallowed"></td>
                <td id="33_1300" axis="0" abbr="5_1_2013-05-03_1" name="6_2" class="notallowed"></td>
            </tr>
        </tbody>
    </table>

J'ai cherché pas mal sur le net, mais rien ne me convenait et je me demande même d'ailleurs si c'est possible. Pensez-vous qu'il faudrait peut-être créer une DIV du contenu et du style de la cellule qui sera déplacée et juste supprimer ce qu'il y a un l'intérieur de la cellule ?

03/05/2013, 23h14
danielhagnoul

Bonsoir

Pour déplacer une ligne dans le tableau c'est facile, exemple : $( "#table_reservation > tbody" ).append( "#table_reservation > tbody > tr:eq(2)" );.

Déplacé une cellule en respectant la structure de la table ce n'est pas possible, on peut seulement permuter deux cellules avec la méthode ci-dessus (append, prepend, after, before).

Avec du "drag and drop", il faut utiliser jQuery UI, je crois que cela sera plus difficile à réaliser.
06/05/2013, 09h17
chatis

Bonjour,

Merci de votre réponse, mais je ne suis pas sûr de ce que vous dites, car j'avais trouvé un plugin jquery qui faisait le déplacement d'une cellule vers un autre endroit, mais ca supprimait la cellule à sa première place et sa rajoutait une colonne dans la ligne ou je droppais la cellule, mais c'est pas ce que je cherche... Moi je ne voudrais pas modifier la structure de la table quand je fais mon drag&drop.

Pensez-vous qu'il est possible de créer une div au même caractéristique que la cellule que je veux déplacer quand on clic sur la cellule et de déplacer non plus le TD mais la div et de recopier toutes les caractéristique dans la cellule ou on fait un drop ??

Merci