移動<tr>與JQuery

Question

我在我的頁面上有這樣的表格。

<table border="1"> 
    <tr> 
     <td>first</td> 
     <td><a href="#">first click</a></td> 
    </tr> 
    <tr> 
     <td>second</td> 
     <td><a href="#">second click</a></td> 
    </tr> 
    <tr> 
     <td>third</td> 
     <td><a href="#">third click</a></td> 
    </tr> 
    <tr id="change"> 
     <td colspan="2"> 
      <button>change</button> 
      </td> 
    </tr> 
    </table> 

當我點擊的鏈接，我想下​​被點擊鏈接的，此舉「#change」。例如;當我點擊「第一次點擊」表的變化像這樣..

<table border="1"> 
    <tr> 
     <td>first</td> 
     <td><a href="#">first click</a></td> 
    </tr> 
    <tr id="change"> 
     <td colspan="2"> 
      <button>change</button> 
      </td> 
    </tr> 
    <tr> 
     <td>second</td> 
     <td><a href="#">second click</a></td> 
    </tr> 
    <tr> 
     <td>third</td> 
     <td><a href="#">third click</a></td> 
    </tr> 
    </table> 

我該怎麼用JQuery做到這一點？謝謝..

Answer 1

試試這個：

$('table tr td a').click(function() { 
    $(this).closest('tr').after($('#change')); 
});​ 

fiddle

Answer 2

嘗試這種（未經測試）

jQuery('td a').each(function(){ 
    var j = jQuery(this); 
    jTr = j.closest('table').find('#change'); 
    j.closest('tr').after(jTr); 
}); 

Answer 3

jQuery('td a').click(function(){ 
    $(this).parents("tr").after($('#change')); 
}); 

http://jsfiddle.net/6AMnV/

Answer 4

$("a").click(function(){ 
    var $change = $('#change'); 
    $('#change').remove(); 
    $(this).closest('tr').after($change); 
});​ 

Answer 5

使用事件委託，因此只能將事件偵聽器的混合，而不是幾個：

// Using Event Delegation only adds one event listener 
​$("table").on("click", "a", function (event) { 
    // Prevent any navigation or jumping to the top of the page 
    event.preventDefault(); 
    // Find the closest <tr>, insert #change after it. 
    $(this).closest("tr").after($("#change")); 
});​​​​​​​​