5

jQuery 中将整个 html 替换为 a <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 一样简单的东西......

4

3 回答 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>

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

于 2010-01-16T20:04:56.527 回答
1

这应该这样做：

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

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

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

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

如果我没记错的话，replaceWith与 jQuery 对象一起使用会将元素从原来的位置取出并插入到新位置，但如果不是这种情况，那么你必须删除targetRow也。否则，这应该有效。

于 2010-01-16T19:24:07.793 回答
0

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

$("tr").click(function () {
  $(this).replaceWith("<tr><td>Something New!</td></tr>");
});
于 2010-01-16T19:21:37.500 回答