如何將2行與2行合併到html表中？

我的英語不太好，爲了表達自己，所以我給你展示一些例子！如何將2行與2行合併到html表中？

這是我的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行！我希望有人能幫助我！謝謝！

來源

2013-07-20 victorio

試試這個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-20 13:15:36

你是搖滾樂！我希望我能理解超過一半的代碼:( – victorio

'tr = $（'tr [id^=''+ $（this）.closest（'tr'）。attr（'id'）。slice 0，3）+'「]'）'這意味着'tr'屬性將是全部'tr'，這些ID以相同的前3個字符開頭，而'tr.eq（1）'意味着 - - >「tr'屬性中的第二行？ – victorio

是的，它確切無誤。 –

能這樣做太所有元素：

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

來源

2013-07-20 13:21:55

如何將2行與2行合併到html表中？

回答

相關問題