javascript - 如何将 2 行与 html 表格中的 2 行合并在一起？

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

看看你编辑的 fiddle :http://jsfiddle.net/lulu3030/UQz8u/6/

只是一些解释:

• closest('tr') 方法查找最近的具有 tr 标签的父级
• slice(0, 3) 获取字符串的前 3 个字符
• => 变量 tr 选择具有相同前 3 个 id 字符的所有元素
• insertBefore 和 insertAfter 方法允许移动选定的元素