jquery - 单击每行中存在的按钮时隐藏表格的行。在其他空表中显示同一行

Question

我有两张桌子。一个表包含数据，另一个是空的。单击每一行中存在的特定字段时，我希望该行被隐藏并同时显示在空表中。

---

我使用的 Html 表具有这种类型结构：我希望行在单击时来回移动<span>@<span>

  <table class='table1' id='frm1'>
    <tr>
    <th>
    Name</th>
    <th>
    Address</th>
    <th>
    Amount
    </th>

    </tr>
    <tr id="one">
    <td><span class="s1">@</span>
    John

    </td>
    <td>
    California
    </td>

    <td>
    $4000</td>
        </tr>
    <tr id="two">
    <td><span class="s1">@</span>
    tedd
    </td>
    <td>
    California
    </td>

    <td>
    $4000</td>
        </tr>
    <tr id="three">
    <td><span class="s1">@</span>
    John

    </td>
    <td>
    florida
    </td>

    <td>
    $8000</td>
        </tr>
        </table>
    </div>
        <div class='text'></div>
    <div class='frm'>
    <table id='frm2'>
        </table>

`

---

我使用的 jQuery 代码：

$('.s1').click(function(){$(this).closest('tr').clone().appendTo('#frm2').end().end().hide();});


$('.s1').click(function () {

$("frm2 tr").attr('id', function() {return $(this).attr('id')});
alert($("frm2 tr").attr('id'));
});/*tried to set the id's of table 1 as id's to table 2*/

我想来回移动行。我无法引用移动的行

Answer 1

这是可以实现您所描述的粗略代码

$('.particular_field').click(function(){
  $(this).closest('tr').clone().appendTo('#empty_table').end().end().hide();
})  

更新 伴随的标记

 <table id="table1" border="1">
   <tr>
      <td>Value 1</td>
      <td>
         <input type="button" class="particular_field" value="click me" />
      </td>
   </tr>
   <tr>
      <td>Value 2</td>
      <td>
         <input type="button" class="particular_field" value="click me" />
      </td>
   </tr>
   <tr>
      <td>Value 3</td>
      <td>
         <input type="button" class="particular_field" value="click me" />
      </td>
   </tr>
   <tr>
      <td>Value 4</td>
      <td>
         <input type="button" class="particular_field" value="click me" />
      </td>
   </tr>
</table>

<table id="empty_table"></table>

Answer 2

因此，如果您想单击表中的一行并将其放在另一个空表上，反之亦然，请检查以下示例：

http://jsfiddle.net/nashio/MXKD3/1/

$(function(){
$(document).on("click", "table tr", function(){
    if( $(this).closest("table").hasClass("table1") ) {
        $(".table2 tbody").prepend($(this));
    } else {
        $(".table1 tbody").prepend($(this));
    }
});
});

Table Source
<table class="table1">
<tbody>
<tr>
    <td>John</td><td>Doe</td>
</tr>
<tr>
    <td>Steve</td><td>Thomas</td>
</tr>
</tbody>
</table>

Table Target
<table class="table2">
<tbody>
</tbody>
</table>