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

【问题标题】：moving a row from one table to another using jquery使用jquery将一行从一个表移动到另一个表
【发布时间】：2020-01-10 22:14:55
【问题描述】：

我关注了之前发布的问题here

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

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

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

提前致谢，

普里扬克

【问题讨论】：

在制作选择器时要记住的一点是，只根据需要进行具体说明。例如，您有没有在 #table_source 中但不在 td 中的 img.move_row？如果没有，为什么包括它？ $('#table_source img.move_row') 将是完全等价的。如果你做到了，那么 $('#table_source').find('img.move_row') 会更快。

标签： jquery html

【解决方案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>

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

【讨论】：

嗨.. 只是看一下代码，我还想删除其中一列，即 tr.. 在将其添加到目标表之前从 tr.. 中删除一列。对于新的删除图像，我只需更改目标 tr 的 src 字段，例如 .attr("src", "new_delete_img_path.jpg")
是的，只需更新 src 属性。至于删除 td，您可以在克隆上使用 find 方法并调用 remove。您也必须在删除案例中添加它。
.live() 自 jQuery 1.7 起已弃用。把它换成同样有用的.on()，你就大功告成了。除了document，您可能可以在页面上找到合适的侦听器（如果没有别的，则是一个包装器div！）但最坏的情况是，绑定到文档的功能与使用.live() 相同。
我将 js 更改为使用 .click 事件，例如 $("#table_role img.move-row").click( function() {...
单击不起作用，因为您正在 DOM 上创建新元素。如上所述，.on() 和 .live() 应该可以工作。我只是选择使用.live()，因为当人们使用旧版本的 jQuery 时它更有可能工作。然而，.on() 的使用确实代表了一种更好、更面向未来的解决方案。

【解决方案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);
    });
});

【讨论】：

在纯 JS 中，这将类似于：dstTbl.tBodies[0].appendChild(srcTbl.tBodies[0].rows[0]).

【解决方案3】：

这是一个代码 sn-p，您可以使用它有一些工作 jquery 来查看 Phil 的答案是如何工作的。他的回答对我实现类似的东西很有帮助，只需添加一个 sn-p 以防它对某人有帮助。

$(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>

【讨论】：