通过jQuery在表格中交换行HTML的最简单方法是什么（不是拖放）答案

【问题标题】：What's the easiest way to exchange row HTML in table via jQuery (not drag and drop)通过jQuery在表格中交换行HTML的最简单方法是什么（不是拖放）
【发布时间】：2011-01-05 22:10:00
【问题描述】：

在 jQuery 中将整个 html 获取为 <TR>（包括 tr 本身，而不是 tr innerhtml）并将其与另一个交换的最简单方法是什么？我在搞乱replaceWith，但那是交换innerHtml，我想交换整个TR html。似乎这对 jquery 来说应该是一件容易的事。我认为必须有一种方法可以通过索引引用 TR，并且很简单：

temp = table.children[4];
table.children[4] = table.children[7]
table.children[7] = temp;

当然这是伪代码，但我正在寻找像 jQuery 一样简单的东西...

【问题讨论】：

标签： jquery html html-table swap

【解决方案1】：

最好的方法是将其包装在可重用的自定义函数中：

$.fn.swap = function(other) {
    $(this).replaceWith($(other).after($(this).clone(true)));
};

这样你就可以把它当作：

one.swap(other);

使用clone(true) 以便将事件也考虑在内。

这是一个SSCCE，它演示了与下一行（如果有的话）交换行：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2078626 part I</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $.fn.swap = function(other) {
                $(this).replaceWith($(other).after($(this).clone(true)));
            };
            $(document).ready(function() {
                $('tr').css('cursor', 'pointer').click(function() {
                    $(this).swap($(this).next());
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody>
                <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>
                <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>
                <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>
                <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>
                <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>
            </tbody>
        </table>
    </body>
</html>

这是一个 SSCCE，它演示了如何在您的特定情况下使用它：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2078626 part II</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $.fn.swap = function(other) {
                $(this).replaceWith($(other).after($(this).clone(true)));
            };
            $(document).ready(function() {
                $('button.swap').click(function() {
                    $('#table tr:eq(1)').swap($('#table tr:eq(3)'));
                });
            });
        </script>
    </head>
    <body>
        <table id="table">
            <tbody>
                <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>
                <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>
                <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>
                <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>
                <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>
            </tbody>
        </table>
        <button class="swap">swap rows 2 and 4</button>
    </body>
</html>

请注意，元素索引是从零开始的，因此:eq() 中的1 和3。

【讨论】：

这就是我喜欢 jquery 的原因。总有一个简单的 1 行优雅的解决方案！谢谢

【解决方案2】：

应该这样做：

var sourceRow = $('tr').eq(7);
var targetRow = $('tr').eq(4);

targetRow.after(sourceRow.clone());
sourceRow.replaceWith(targetRow);

简单地说，它在第二行之后插入第一行的副本，然后用第二行替换原来的第一行。

我插入第一行的克隆而不是第一行本身的原因是这样我们不会丢失第一行的位置并且可以正确定位第二行。

如果我没记错的话，将 replaceWith 与 jQuery 对象一起使用会将元素从原来的位置取出并插入到新位置，但如果不是这种情况，您还必须删除 targetRow .否则，这应该可以工作。

【讨论】：

【解决方案3】：

根据文档 replaceWith (http://docs.jquery.com/Manipulation/replaceWith#content) 应该做你想做的事，也许你使用的选择器是针对 tr 以外的东西？

$("tr").click(function () {
  $(this).replaceWith("<tr><td>Something New!</td></tr>");
});

【讨论】：