logo标签列表

通过jQuery交换表格中行的HTML内容（非拖放方式），最简单的方法是什么？

jqueryhtmlhtml-tableswap
5
在jQuery中，最简单的方法是如何获取一个包含标签的完整html（包括tr本身，而不是tr innerhtml），并将其与另一个标签交换？我正在尝试使用replaceWith，但那只是交换了innerHtml，而我想交换整个TR html。看起来这对于jquery来说应该是一项容易的任务。我认为有一种方法可以通过索引引用TRs，并像这样轻松地完成交换：
temp = table.children[4];
table.children[4] = table.children[7]
table.children[7] = temp;

当然，这只是一个伪代码，但我正在寻找类似于jQuery的简单方法...
3个回答
7

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

$.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。对于任何问题，总有一个简单、优雅的一行代码解决方案！谢谢。 - mdz
1

这应该可以解决问题：

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

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

以简单易懂的语言来说，它会在第二行后插入第一行的副本，然后用第二行替换原始的第一行。
之所以插入第一行的克隆而不是第一行本身，是因为这样我们就不会失去第一行的位置，并且可以正确地定位第二行。
如果我没记错的话，使用 jQuery 对象的 replaceWith 将把元素从其原始位置取出并插入到新位置，但如果不是这种情况，则还必须删除 targetRow。否则，这应该可以正常工作。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接