如何将 2 行与 html 表中的 2 行合并在一起？答案

【问题标题】：how to merge 2 rows together WITH 2 rows in html table?如何将 2 行与 html 表中的 2 行合并在一起？
【发布时间】：2013-07-19 17:00:55
【问题描述】：

我的英语不太好，表达自己，所以我用例子给你看！

这是我的带有代码的 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 行合并！我希望有一个人可以帮助我！谢谢！

【问题讨论】：

标签： javascript jquery merge html-table swap

【解决方案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个字符
=> 变量 tr 选择具有相同 3 个第一个 id 字符的所有元素
insertBefore 和 insertAfter 方法允许移动选定的元素

【讨论】：

你太棒了！我希望我能理解你一半以上的代码:(
tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]') 这意味着tr 属性将是所有tr，哪些ID 以相同的前3 个字符开头？ tr.eq(1) 表示 --> tr 属性中的第二行？

【解决方案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);
    });
});

【讨论】：