我有两张桌子，我一起工作。第一个表是项目列表（#myTable-unppoiled）。在第一个表中单击一行时，会添加.watching类，并将其克隆到第二个表中，该表添加.remove类（#myTable-watching）。
当在第一个表中再次单击同一行时，我想根据行id删除第二个表中克隆的行。我这样做有困难。这就是我所拥有的。
表1
<table id="myTable-unspoiled">
<tr id="row1" class="watching"><td>Some Data</td></tr>
</table>
表2
<table id="myTable-watching">
<tr id="row1" class="remove"><td>Some Data</td></tr>
</table>
的jQuery
if ($(this).hasClass("watching")) {
trid = $(this).attr('id');
$(".watching").click(function(){
$('#myTable-watching tr:eq(trid)').remove();
});
$(this).toggleClass('watching');
}
我还要反过来这样，如果用户点击#myTable-watching表中的行，它会根据行id切换＃myTable-unppoiled表中的.watching类（但不会删除＃myTable-unppoiled中的行。
我的测试页面可以在这里找到：
http://www.ffxiv-gathering.com/40-test.php
目前唯一具有id的行是Raw Triphane（450+）用于测试目的。
答案 0 :(得分：1)
你基本上有两个事件：
1-单击第一个表的一行后，您要检查它是否已经复制到第二个表（我使用数据属性来标识表行）
if(($('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').length==0){}
如果此行不存在，则克隆它，否则将其删除。
2-如果单击第二个表的一行：然后在第一个表中找到相同的行并删除类watching：
$('#myTable-unspoiled').find('[data-reference="'+$(this).data('reference')+'"]').removeClass('watching');
然后从表中删除该行。
$('#myTable-unspoiled > tbody > tr').click(function(){
$(this).toggleClass('watching');
if(($('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').length==0)){
$('#myTable-watching > tbody').append($(this).clone().removeClass('watching'));
}
else {
$('#myTable-watching').find('[data-reference="'+$(this).data('reference')+'"]').remove();
}
});
$('#myTable-watching > tbody').on('click','> tr',function(){
$('#myTable-unspoiled').find('[data-reference="'+$(this).data('reference')+'"]').removeClass('watching');
$(this).remove();
});#myTable-watching > tbody > tr , #myTable-unspoiled > tbody > tr {
cursor:pointer;
background: rgb(238, 238, 238) none repeat scroll 0% 0%;
}
.watching {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="myTable-unspoiled" class="table table-condensed">
<thead><tr style="cursor: pointer;">
<th class="header headerSortDown">Item <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Level <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Map <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Time <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Class <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Scrip <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header headerSortDown">Status <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
</tr></thead>
<tbody>
<tr class="hour-ten" data-reference="1">
<td>Bamboo Shoot (450+)</td>
<td>63</td>
<td>Yanxia (28, 25) (Slot 8)</td>
<td>10:00</td>
<td>Botany</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x35/38/42</td>
<td class="status-ten">2 hr remaining</td>
</tr><tr class="hour-twelve" style="" data-reference="2">
<td>Ala Mhigan Salt Crystal (Underwater)</td>
<td>70</td>
<td>The Lochs (20, 28) (Slot 1)</td>
<td>12:00</td>
<td>Mining</td>
<td class="scrip">--</td>
<td class="status-twelve">active in 2 hr</td>
</tr><tr class="hour-twelve" data-reference="3">
<td>Raw Star Spinel (450+)</td>
<td>63</td>
<td>The Ruby Sea (15, 5) (Slot 8)</td>
<td>12:00</td>
<td>Mining</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x35/38/42</td>
<td class="status-twelve">active in 2 hr</td>
</tr><tr class="hour-six" data-reference="4">
<td>Beech Branch (450+)</td>
<td>60★★</td>
<td>The Fringes (11, 17) (Slot 3)</td>
<td>6:00</td>
<td>Botany</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x25/27/30</td>
<td class="status-six">n / a</td>
</tr><tr class="hour-six" data-reference="5">
<td>Hallowed Basil</td>
<td>70★</td>
<td>The Peaks (23, 16) (Slot 6)</td>
<td>6:00</td>
<td>Botany</td>
<td class="scrip">--</td>
<td class="status-six">n / a</td>
</tr><tr class="hour-four" data-reference="6">
<td>Jhammel Ginger (470+)</td>
<td>70</td>
<td>The Lochs (5, 8) (Slot 3)</td>
<td>4:00</td>
<td>Botany</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x23/25/27</td>
<td class="status-four">n / a</td>
</tr><tr class="hour-eight" data-reference="7">
<td>Lotus Root (450+)</td>
<td>66</td>
<td>Yanxia (28, 7) (Slot 7)</td>
<td>8:00</td>
<td>Botany</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x40/44/48</td>
<td class="status-eight">n / a</td>
</tr><tr class="hour-two" data-reference="8">
<td>Othardian Plum (470+)</td>
<td>70</td>
<td>The Azim Steppe (27, 16) (Slot 2)</td>
<td>2:00</td>
<td>Botany</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x25/27/30</td>
<td class="status-two">n / a</td>
</tr><tr class="hour-four" data-reference="9">
<td>Raw Azurite (450+)</td>
<td>66</td>
<td>The Azim Steppe (5, 29) (Slot 7)</td>
<td>4:00</td>
<td>Mining</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/red-gatherer-scrip.png"> x40/44/48</td>
<td class="status-four">n / a</td>
</tr><tr class="hour-six" data-reference="10">
<td>Raw Imperial Jade (470+)</td>
<td>70</td>
<td>Yanxia (29, 9) (Slot 6)</td>
<td>6:00</td>
<td>Mining</td>
<td class="scrip"><img src="http://www.ffxiv-gathering.com/images/yellow-gatherer-scrip.png"> x23/25/27</td>
<td class="status-six">n / a</td>
</tr></tbody>
</table>
<br/><br/>
<table id="myTable-watching" class="table table-condensed">
<thead><tr style="cursor: pointer;">
<th class="header headerSortDown">Item <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Level <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Map <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Time <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Class <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header">Scrip <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
<th class="header headerSortDown">Status <img src="http://www.ffxiv-gathering.com/images/sort.png" width="10" height="10"></th>
</tr></thead>
<tbody></tbody>
</table>
答案 1 :(得分：0)
最简单的方法是使用监视表的前缀修改行克隆ID。然后解析匹配的id是相当容易的
var watchRowPrefix = 'watching-';
$('#myTable-unspoiled tbody tr').click(function() {
var $row = $(this);
if ($row.hasClass('watching')) {
$('#' + watchRowPrefix + this.id).remove()
} else {
var $clone = $row.clone().attr('id', watchRowPrefix + this.id);
$('#myTable-watching tbody').append($clone)
}
$row.toggleClass('watching');
})
$('#myTable-watching').on('click', ' tbody tr', function() {
var unspoiledId = this.id.replace(watchRowPrefix, '');
$('#' + unspoiledId).removeClass('watching');
this.remove();
}).watching {
color: red
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>unspoiled</strong>
<table id="myTable-unspoiled">
<tbody>
<tr id="row1">
<td>item 1</td>
</tr>
<tr id="row2">
<td>item 2</td>
</tr>
<tr id="row3">
<td>item 3</td>
</tr>
<tr id="row4">
<td>item 4</td>
</tr>
<tr id="row5">
<td>item 5</td>
</tr>
</tbody>
</table>
<strong>watching</strong>
<table id="myTable-watching">
<tbody>
</tbody>
</table>