le déplacement d'une ligne d'un tableau à l'autre à l'aide de jquery

J'ai suivi à la question précédemment publié ici

J'ai besoin de faire à peu près la même, c'est à dire que j'ai un bouton ajouter sur chaque ligne et sur ajouter une image cliquez sur je veux déplacer la ligne à une autre table, sauf que quand je bouge ma ligne, la table cible n'a qu'une colonne commune de la table source (source de la table a encore une colonne supplémentaire qui je n'ai pas dans la table cible) et j'ai besoin d'ajouter une colonne avec un bouton supprimer de l'image pour chaque ligne déplacé dans la table cible.
Droit maintenant en mesure de supprimer la ligne à partir de la source en utilisant le code suivant:

$(document).ready(function () {
    $('#table_source td img.move_row').click(function () {
        $(this).parent().parent().parent().remove();
    });
});

Deuxième partie nécessaire, c'est quand je clique sur supprimer le bouton image dans la table cible la ligne doit revenir à la table d'origine

Merci d'avance,

Priyank

Quelque chose à garder à l'esprit lors de la prise d'un sélecteur est à seulement aussi précis que nécessaire. Par exemple, avez-vous des img.move_row qui sont à l'intérieur de #table_source mais pas encore en td? Si non, pourquoi? $('#table_source img.move_row"), c'est l'équivalent exact. Et si vous êtes vers le bas, alors $('#table_source').find('img.move_row') sera plus rapide encore.

OriginalL'auteur pri_dev | 2011-12-10

  1. 11

    HTML

    <table id="table_source">
    <tbody>
        <tr>
            <td>Row</td>
            <td>1</td>
            <td><img src='move_image_path' alt='Move' class='move-row' /></td>
        </tr>
        <tr>
            <td>Another Row</td>
            <td>2</td>
            <td><img src='move_image_path' alt='Move' class='move-row' /></td>
        </tr>
    </tbody>
</table>

<table id="table_dest">
    <tbody>
    </tbody>
</table>

    JS

    $(document).ready(function() {
    $("#table_source img.move-row").live("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "remove_image_path.jpg")
            .attr("alt", "Remove");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest img.move-row").live("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "move_image_path.jpg")
            .attr("alt", "Move");
        $("#table_source tbody").append(tr);
    });
});
    Salut.. il suffit de regarder le code, je tiens également à supprimer l'une des colonnes, c'est à dire un td dans le tr..avant de l'ajouter dans la table cible. Et pour le nouveau supprimer l'image ne je viens de changer la src champ de la cible tr comme .attr("src", "new_delete_img_path.jpg")
    Yep, il suffit de mettre à jour l'attribut src. Aussi loin que la suppression d'un td, vous pouvez utiliser la méthode find sur le clone et remove. Vous auriez aussi ajouter un bien sur la suppression de cas.
    .live() est déprécié que de jQuery 1.7. Remplacez-la par le tout aussi utile .on() et vous êtes dorée. Vous pouvez PROBABLEMENT trouver un port d'écoute sur la page autre que document, (un wrapper div si rien d'autre!) mais le scénario du pire cas, la liaison vers le document sera en fonctionnalités identiques à l'aide de .live().
    J'ai changé le js pour utiliser le .cliquez sur l'événement comme $("#table_role img.déplacez-ligne").cliquez sur( function() {...
    Cliquez sur ne fonctionnera pas parce que vous êtes en train de créer de nouveaux éléments dans le DOM. Comme mentionné ci-dessus, .on() et .live() devrait fonctionner. J'ai juste choisi d'utiliser .live() depuis plus de chance de travailler quand les gens utilisent d'anciennes versions de jQuery. Il est vrai cependant que l'utilisation de .on() représente une bien meilleure et plus solution de l'avenir.

    OriginalL'auteur Phil Klein

  2. 2

    Essayé au-dessus d'une suggestion récente de jquery lib (2.1.4) et il ne fonctionne pas correctement, j'ai été en mesure de déplacer la ligne qu'une seule fois (les deux sens). J'ai eu pour l'améliorer un peu, mais maintenant ça fonctionne. Si quelqu'un est intéressé voici le code:

    $(document).ready(function() {
    $("#table_source").on("click","img.move-row", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "remove_image_path.jpg")
            .attr("alt", "Remove");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest").on("click"," img.move-row", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
            .attr("src", "move_image_path.jpg")
            .attr("alt", "Move");
        $("#table_source tbody").append(tr);
    });
});
    En pur JS, ce serait quelque chose comme: dstTbl.tBodies[0].appendChild(srcTbl.tBodies[0].rows[0]).

    OriginalL'auteur Radosław Jakubowski