0

私は自分自身を表現するのに英語があまり得意ではないので、例を挙げて説明します!

コード付きのHTMLテーブルは次のとおりです。

<table border="1">
    <tr id="tr1_1">
        <td rowspan="2">1</td>
        <td>tr1.1 td2</td>
        <td>tr1.1 td3</td>
        <td rowspan="2">
            <a href="#" class="move up">up</a>/
            <a href="#" class="move down">down</a>
        </td>
    </tr>
    <tr id="tr1_2">
        <td>tr1.2 td2</td>
        <td>td1.2 td3</td>
    </tr>

    <tr id="tr2_1">
        <td rowspan="2">2</td>
        <td>tr2.1 td2</td>
        <td>tr2.1 td3</td>
        <td rowspan="2">
            <a href="#" class="move up">up</a>/
            <a href="#" class="move down">down</a>
        </td>
    </tr>
    <tr id="tr2_2">
        <td>tr2.2 td2</td>
        <td>td2.2 td3</td>
    </tr>
</table>

（結果はこちらからご覧いただけます）

たとえば、次の 2 つの行の「上」リンクをクリックすると、結果は次のようになります。

<table border="1">
    <tr id="tr2_1">
        <td rowspan="2">2</td>
        <td>tr2.1 td2</td>
        <td>tr2.1 td3</td>
        <td rowspan="2">
            <a href="#" class="move up">up</a>/
            <a href="#" class="move down">down</a>
        </td>
    </tr>
    <tr id="tr2_2">
        <td>tr2.2 td2</td>
        <td>td2.2 td3</td>
    </tr>

    <tr id="tr1_1">
        <td rowspan="2">1</td>
        <td>tr1.1 td2</td>
        <td>tr1.1 td3</td>
        <td rowspan="2">
            <a href="#" class="move up">up</a>/
            <a href="#" class="move down">down</a>
        </td>
    </tr>
    <tr id="tr1_2">
        <td>tr1.2 td2</td>
        <td>td1.2 td3</td>
    </tr>
</table>

（最終結果はこちらからご覧いただけます）

では、どうすればこれを行うことができますか？prev()javascriptのandメソッドは知っているのですが、before()1行と1行しかマージしないのですが、2行と2行をマージしたい！誰かが私を助けてくれることを願っています！ありがとうございました！

4

2 に答える 2

3

このjQueryコードを試してください:

$('.up').click(function() {
    tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
    tr.insertBefore(tr.eq(0).prev().prev())
    return false;
})

$('.down').click(function() {
    tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
    tr.insertAfter(tr.eq(1).next().next())
    return false;
})

そして、編集されたフィドルを見てください：http://jsfiddle.net/lulu3030/UQz8u/6/

いくつかの説明：

  • closest('tr')メソッドは、tr タグを持つ最も近い親を見つけます
  • slice(0, 3)文字列の最初の 3 文字を取得する
  • =>変数trは、最初の3つのid文字が同じすべての要素を選択します
  • insertBeforeおよびinsertAfterメソッドにより、選択した要素を移動できます
于 2013-07-20T13:15:36.390 に答える
1

そのようにすることもできます：

デモ

$(function () {
    $('.up, .down').on('click', function () {
        var $tr = $(this).closest('tr'),
            $flag = $('<tr/>').insertBefore($tr),
            $rows = $tr.add($tr.next('tr')).detach()
            methods = $(this).is('.up') ? ['insertBefore', 'prevAll'] : ['insertAfter', 'nextAll'];

        if ($flag[methods[1]]('tr').eq(1).length) {
            $rows[methods[0]]($flag[methods[1]]('tr').eq(1));
            $flag.remove();
        } else $flag.replaceWith($rows);
    });
});
于 2013-07-20T13:21:55.220 に答える