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

发布于 2024-08-18 20:01:37 字数 356 浏览 9 评论 0原文

jQuery 中将整个 html 用作（包括 tr 本身，而不是 tr insidehtml）并将其与另一个进行交换的最简单方法是什么？我正在摆弄replaceWith，但那是交换innerHtml，我想交换整个TR html。看起来这对于 jquery 来说应该是一个简单的任务。我认为必须有一种通过索引引用 TR 的方法，并且就像这样简单：

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

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

原文

What's the easiest way in jQuery to take the entire html for a <TR> (including the tr itself, not tr innerhtml) and swap it with another one? I'm messing around with replaceWith, but that's swapping the innerHtml and I want to swap the whole TR html. seems like it should be an easy task for jquery. I'm thinking there's gotta be a way to reference the TRs by index and as easy as:

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

of course that's pseudocode, but I'm looking for something as easy as that in jQuery...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ぽ尐不点ル 2024-08-25 20:01:37

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

$.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()。

Nicest would be to wrap it in a reuseable custom function:

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

So that you can use it as:

one.swap(other);

The clone(true) is used so that events are also taken into account.

Here's an SSCCE which demonstrates swapping rows with its next row (if any):

<!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>

Here's an SSCCE which demonstrates how it can be used in your particular case:

<!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>

Note that the element index is zero based, hence the 1 and 3 in :eq().

回复收藏 0 原文

太傻旳人生 2024-08-25 20:01:37

应该这样做：

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

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

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

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

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

This should do it:

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

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

In plain english, it inserts the copy of the first row after the second row, then it replaces the original first row with the second.

The reason why I insert a clone of the first row and not the first row itself is that this way we don't lose the position of the first row and can position the second row properly.

If I remember correctly, using replaceWith with a jQuery object will take the element out of it's original place and insert to the new place, but if this is not the case, you then have to remove the targetRow also. Otherwise, this should work.

回复收藏 0 原文

南汐寒笙箫 2024-08-25 20:01:37

基于文档replaceWith (http://docs.jquery.com/Manipulation/replaceWith#content< /a>) 应该做你想做的事，也许你使用的选择器的目标不是 tr ？

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

Based on the documentation replaceWith (http://docs.jquery.com/Manipulation/replaceWith#content) should do what you want, maybe the selector you are using is targeting something other than the tr?

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

回复收藏 0 原文

~没有更多了~

关于作者

爱情眠于流年

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。