Question

我的英语不太好，表达自己，所以我带着例子向你展示！

这是我的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>

（您可以看到结果here）

例如，如果我点击后两行的“向上”链接，结果应为：

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

（您可以看到最终结果here）

那我怎么能这样做？我知道javascript中的prev()和before()方法，但它只合并1行1行，但我想合并2行2行！我希望有一个人可以帮助我！谢谢！

Answer 1

试试这个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个字符
=＆GT;变量tr选择具有相同的3个第一个id字符的所有元素
insertBefore和insertAfter方法允许移动所选元素

Answer 2

也可以这样做：

DEMO

$(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);
    });
});

如何在html表中合并2行和2行？

2 个答案: