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

Question

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

在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;

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Bal*_*usC 7

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

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

Run Code Online (Sandbox Code Playgroud)

这样你就可以用它:

one.swap(other);

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这是一个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>

Run Code Online (Sandbox Code Playgroud)

另外,元素索引是基于零,因此1和3在:eq().

归档时间：	16 年，5 月前
查看次数：	2628 次
最近记录：	9 年，1 月前