Question

我按照之前发布的问题here

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

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

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

提前致谢，

Priyank

Answer 1

<强> 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);
    });
});

Answer 2

尝试使用最近的jquery lib（2.1.4）进行上述建议并且它无法正常工作，我只能将行移动一次（任一方向）。我不得不加强它，但现在它的工作原理。如果有人对此感兴趣，请输入以下代码：

$(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);
    });
});

Answer 3

这是一个您可以使用的代码片段，其中包含一些有效的jquery，以查看Phil的答案如何工作。他的回答对我实施类似操作很有帮助，只是添加了一个摘要以防对某人有所帮助。

$(document).ready(function() {
    $("#table_source .move-row").on("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find(".move-row").text("-");
        $("#table_dest tbody").append(tr);
    });

    $("#table_dest .move-row").on("click", function() {
        var tr = $(this).closest("tr").remove().clone();
        tr.find(".move-row").text("+");
        $("#table_source tbody").append(tr);
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>1st Table:</h3>
<table class="table" id="table_source">
    <tbody>
        <tr>
            <td>Row</td>
            <td>1</td>
            <td><a href="#/" class='move-row'>+</a></td>
        </tr>
        <tr>
            <td>Another Row</td>
            <td>2</td>
            <td><a href="#/" class='move-row'>+</a></td>
        </tr>
    </tbody>
</table>

<h3>2nd Table:</h3>
<table class="table" id="table_dest">
    <tbody>
      <tr>
          <td>Row</td>
          <td>1</td>
          <td><a href="#/" class='move-row'>-</a></td>
      </tr>
    </tbody>
</table>

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

3 个答案: