Как объединить 2 строки вместе 2 строки в таблице html?

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)

Итак, как я мог это сделать? Я знаю методы prev() и before() в javascript, но он объединяет только 1 строку с 1 строкой, но я хочу объединить 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') метод найти ближайший родительский, который имеет тр тег
• slice(0, 3) получить первые 3 символа строки
• => переменная тр выбирает все элементы, которые имеют те же 3 первых символы идентификаторов
• 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); 
    }); 
});