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>

（你可以在这里看到结果）

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

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

（你可以在这里看到最终结果）

那么我该怎么做呢？我知道 javascript 中的prev()andbefore()方法，但它只将 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 回答