5

jQueryでhtml全体<TR>（tr innerhtmlではなくtr自体を含む）を取得して別のHTMLと交換する最も簡単な方法は何ですか？私はreplaceWithをいじっていますが、それはinnerHtmlを交換しているので、TRhtml全体を交換したいと思います。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>

要素インデックスは 0 ベースであるため、1と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);

平易な英語では、最初の行のコピーを2番目の行の後に挿入し、元の最初の行を2番目の行に置き換えます。

最初の行自体ではなく最初の行のクローンを挿入する理由は、この方法で最初の行の位置を失うことがなく、2番目の行を適切に配置できるためです。

私の記憶が正しければ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 に答える