3

我的页面上有一个表格，如下所示：

 <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 做到这一点？

4

5 回答 5

2

试试这个：

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

小提琴

于 2012-12-14T14:17:14.627 回答
1 
jQuery('td a').click(function(){
    $(this).parents("tr").after($('#change'));
});

http://jsfiddle.net/6AMnV/

于 2012-12-14T14:19:58.223 回答
1

使用事件委托，因此只添加事件监听器而不是几个：

// 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"));
});​​​​​​​​
于 2012-12-14T14:24:09.393 回答
0

试试这个（未经测试）

jQuery('td a').each(function(){
    var j = jQuery(this);
    jTr = j.closest('table').find('#change');
    j.closest('tr').after(jTr);
});
于 2012-12-14T14:12:31.143 回答
0 
$("a").click( function(){
  var $change = $('#change');
  $('#change').remove();  
  $(this).closest('tr').after($change);
});​
于 2012-12-14T14:23:13.270 回答