jquery - 使用 JQuery 移动 <tr>

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