移动<；tr>；使用JQuery

我的页面上有这样一个表：

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

第一
第二
第三
改变

当我点击其中一个链接时，我希望在点击的链接下移动“#更改”。例如当我点击“第一次点击”时，表格会发生如下变化

 <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实现它？

试试这个（未测试）

试试这个：

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

使用事件委派，因此只在混合中添加事件侦听器，而不是几个：

// 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"));
});​​​​​​​​

//使用事件委派只会添加一个事件侦听器
​$（“表”）。在（“点击”，“a”，功能（事件）{
//防止任何导航或跳到页面顶部
event.preventDefault（）；
//找到最近的，在其后面插入#change。
美元（$（“#更改”））之后的最近（$）；
});​​​​​​​​

这难道什么都不行吗？因为你只是在把它放在某个地方之前把它删除了？

detatch

比

remove

好，但两者都不是真正需要的，因为“after”将把它从原来的位置删除并放在新的位置。+1为其他答案增加了一点效率。我从不考虑代表团的听众。

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

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

// 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"));
});​​​​​​​​