使用jQuery将一行从一个表移动到另一个表

Question

使用jQuery将一行从一个表移动到另一个表

5

我跟随之前发布在这里的问题。

我需要做类似的事情，即每一行都有一个添加按钮，并且在单击添加图像时，我希望将该行移动到另一个表中，但是当我移动我的行时，目标表只有一个与源表相同的列（源表具有一个额外的列，而目标表中没有），我需要为移入目标表的每一行添加一个包含删除按钮图像的列。现在可以使用以下代码从源中删除行:

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

当我在目标表中点击删除图像按钮时，该行应该移回原始表格。

提前感谢，

Priyank

- pri_dev

制作选择器时要记住的一点是只需要尽可能具体。例如，您是否有在#table_source内但不在td中的img.move_row？如果没有，为什么要包括它？$('#table_source img.move_row')将是其确切等效项。如果您已经到了这个地步，那么$('#table_source').find('img.move_row')仍然会更快。 - Sinetheta

3个回答

2

尝试使用最新的jQuery库（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);
    });
});

- Radosław Jakubowski

在纯JS中，可以这样写：dstTbl.tBodies[0].appendChild(srcTbl.tBodies[0].rows[0])。 - David R Tribble

1

这里有一段代码片段，你可以运行它并查看一些工作中的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>

- MUlferts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil Klein · Accepted Answer

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