当前位置 : 主页 > 网页制作 > JQuery >

使用jquery从一个表移动一行到另一个表

来源:互联网 收集:自由互联 发布时间:2021-06-16
我按照之前发布的问题 here 我需要做的几乎相同,即我在每一行都有一个添加按钮,然后在添加图像上单击我想将该行移动到另一个表,除了当我移动我的行时,目标表只有一个列共用源表
我按照之前发布的问题 here

我需要做的几乎相同,即我在每一行都有一个添加按钮,然后在添加图像上单击我想将该行移动到另一个表,除了当我移动我的行时,目标表只有一个列共用源表(源表还有一个我在目标表中没有的额外列),我需要为移动到目标表中的每一行添加一个带有删除按钮图像的列.
现在可以使用以下代码从源中删除行:

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

第二部分需要的是当我单击目标表中的删除图像按钮时,该行应该移回原始表

提前致谢,

Priyank

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);
    });
});
网友评论