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

StackOverflow https://stackoverflow.com/questions/2078626

  •  21-09-2019
  •  | 
  •  

题

什么是jQuery中把整个HTML的<TR>（包括TR本身，而不是TR innerHTML的），并用另一个交换它的最简单的方法？我瞎搞与replaceWith，但是这交换的innerHTML，我想换整TR HTML。似乎应该是jQuery的一件容易的事。我想有一定有参考的指数TRS和方式一样简单：

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

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

有帮助吗？

解决方案

最好将它包装在一个可重复使用的自定义函数：

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

请注意的是，元素索引是基于零，因此在 1 3和:eq()。

其他提示

此应该这样做：

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

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

在普通的英语，它插入所述第一行的拷贝的第二行之后，然后将其替换原始第一行与第二

为什么我插入的第一行的克隆，而不是第一行本身的原因是这样，我们不会失去第一排的位置，并能够正确地定位在第二排。

如果我没有记错，使用replaceWith用jQuery对象将采取元素出来的是原来的地方并插入到新的地方，但如果情况并非如此，你就必须也删除targetRow。否则，这应该工作。

基于该文档replaceWith

（ http://docs.jquery.com/Manipulation/replaceWith ＃内容）应该做你想要什么，也许你正在使用的目标是比TR以外的其他选择？

$("tr").click(function () {
  $(this).replaceWith("<tr><td>Something New!</td></tr>");
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top