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

我的英语不是很好，要表达我自己，所以我举个例子给大家看

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

1.
tr1.1 td2
tr1.1 td3
/
tr1.2 td2
td1.2 td3
2.
tr2.1 td2
tr2.1 td3
/
tr2.2 td2
td2.2 td3

（您可以看到结果）

例如，如果单击后两行的“向上”链接，结果应该是：

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

2.
tr2.1 td2
tr2.1 td3
/
tr2.2 td2
td2.2 td3
1.
tr1.1 td2
tr1.1 td3
/
tr1.2 td2
td1.2 td3

（您可以看到最终结果）

那我该怎么做呢？我知道javascript中的

prev（）

和

before（）

方法，但它只将1行与1行合并，但我想将2行与2行合并！ 我希望，有人能帮助我！谢谢大家!

试试这个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;
})

看看你的小提琴：

只是一些解释：

• closest（'tr'）

  方法查找具有tr标记的最近父对象

• 切片（0，3）

  获取字符串的前3个字符
• =>变量tr选择具有相同3个第一个id字符的所有元素

• insertBefore

  和

  insertAfter

  方法允许移动选定的元素

试试这个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;
})

看看你的小提琴：

只是一些解释：

• closest（'tr'）

  方法查找具有tr标记的最近父对象

• 切片（0，3）

  获取字符串的前3个字符
• =>变量tr选择具有相同3个第一个id字符的所有元素

• insertBefore

  和

  insertAfter

  方法允许移动选定的元素

---

也可以这样做：

$（函数（）{
$（'.up，.down'）。on（'click'，函数（）{
var$tr=$（this）.closest（'tr'），
$flag=$（''）.insertBefore（$tr），
$rows=$tr.add（$tr.next（'tr'））.detach（）
方法=$（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）；
});
});
也可以这样做：


$（函数（）{
$（'.up，.down'）。on（'click'，函数（）{
var$tr=$（this）.closest（'tr'），
$flag=$（''）.insertBefore（$tr），
$rows=$tr.add（$tr.next（'tr'））.detach（）
方法=$（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）；
});
});
你真是棒极了！我希望我能理解你一半以上的代码：（
tr=$（'tr[id^=“”+$（this）.closest（'tr'）.attr（'id'）.slice（0,3）+'”）
这意味着
tr
属性将是all
tr
，id以相同的前3个字符开头？和
tr.eq（1）
的意思是-->在
tr
属性中的第二行？你太棒了！我希望我能理解你一半以上的代码：（
tr=$（'tr[id^=“”+$（this）.closest（'tr'）.attr（'id'）.slice（0,3）+'']））
这意味着
tr
属性将是all
tr
，哪个ID以相同的前3个字符开头？而
tr.eq（1）
意味着-->tr
属性中的第二行？