如何將選定的表格tr移動到另一個表格中？

Question

我有兩個表MYTABLE1和mytable2 我試圖移動檢查TR行（從表MYTABLE1），以不同的表mytable2

我已經試過如下

$(document).ready(function() { 
 
    
 
    $(document).on("click", ".movemultiple", function(event) 
 
{ 
 
    $('.mytable1 > tbody > tr').each(function() { 
 

 
\t $(this).find('td:eq(0) .updatecheckboxvalueindb:checked') 
 
    
 
    }); 
 
}); 
 
    
 
});

.fa fa-check 
 
{ 
 
    background-color:red!importnt 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable"> 
 
    <thead> 
 
     <tr class="existingvideos"> 
 
     <th>Action</th> 
 
     <th>Name</th> 
 
     <th>File</th> 
 
     <th>Badge</th> 
 
     <th>Equipments</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="connectedSortable ui-sortable"> 
 
     <tr video-id="37" title="" class="newvideos exercises-add-table-content"> 
 
     <td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td> 
 
     <td>crunches</td> 
 
     <td><a href="http://xxx/TS/ht4_970_979.mp4" target="_blank">ht4_970_979.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td><i class="fa fa-check"></i></td> 
 
     </tr> 
 
     <tr video-id="38" title="" class="newvideos exercises-add-table-content"> 
 
     <td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td> 
 
     <td>Sit Ups</td> 
 
     <td><a href="http://xxx/TS/ht4_970_345.mp4" target="_blank">ht4_970_345.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td><i class="fa fa-check"></i></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<br><br> 
 

 

 
<button type="button" class="btn red default movemultiple">Move </button> 
 

 
<br><br> 
 

 
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable"> 
 
    <tbody class="connectedSortable ui-sortable"> 
 
     <tr class="existingvideos"> 
 
     <th>Name</th> 
 
     <th>File</th> 
 
     <th>Badge</th> 
 
     <th>Equipments</th> 
 
     <th>Action</th> 
 
     </tr> 
 
     <tr class="existingvideos" video-id="34"> 
 
     <td>Push Ups</td> 
 
     <td><a href="http://xxx/FitShuffle_Videos/ht4_970_285.mp4" target="_blank">ht4_970_285.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td> 
 
      <i class="fa fa-check"></i> 
 
     </td> 
 
     <td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

您能否讓我知道如何做到這一點？

http://jsfiddle.net/o2gxgz9r/1879/

Answer 1

您可以使用jQuery .closest()得到最接近的錶行（或單元格）和jQuery .remove()與來自DOM的複選框去掉表格單元格：

$(document).ready(function() { 
 
    $(document).on('click', '.movemultiple', function() { 
 
     var $myTable2Body = $('.mytable2 tbody'); 
 
     $('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) { 
 
      var $checkbox = $(item); 
 
      $myTable2Body.append($checkbox.closest('tr')); 
 
      $checkbox.closest('td').remove(); 
 
     }); 
 
    }); 
 
});

.fa fa-check 
 
{ 
 
    background-color:red!importnt 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable"> 
 
    <thead> 
 
     <tr class="existingvideos"> 
 
     <th>Action</th> 
 
     <th>Name</th> 
 
     <th>File</th> 
 
     <th>Badge</th> 
 
     <th>Equipments</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="connectedSortable ui-sortable"> 
 
     <tr video-id="37" title="" class="newvideos exercises-add-table-content"> 
 
     <td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td> 
 
     <td>crunches</td> 
 
     <td><a href="http://xxx/TS/ht4_970_979.mp4" target="_blank">ht4_970_979.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td><i class="fa fa-check"></i></td> 
 
     </tr> 
 
     <tr video-id="38" title="" class="newvideos exercises-add-table-content"> 
 
     <td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td> 
 
     <td>Sit Ups</td> 
 
     <td><a href="http://xxx/TS/ht4_970_345.mp4" target="_blank">ht4_970_345.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td><i class="fa fa-check"></i></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<br><br> 
 

 

 
<button type="button" class="btn red default movemultiple">Move </button> 
 

 
<br><br> 
 

 
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable"> 
 
    <tbody class="connectedSortable ui-sortable"> 
 
     <tr class="existingvideos"> 
 
     <th>Name</th> 
 
     <th>File</th> 
 
     <th>Badge</th> 
 
     <th>Equipments</th> 
 
     <th>Action</th> 
 
     </tr> 
 
     <tr class="existingvideos" video-id="34"> 
 
     <td>Push Ups</td> 
 
     <td><a href="http://xxx/FitShuffle_Videos/ht4_970_285.mp4" target="_blank">ht4_970_285.mp4</a></td> 
 
     <td> 
 
      <span class="btn btn-sm btn-success btn-circle">Push Ups</span> 
 
     </td> 
 
     <td> 
 
      <i class="fa fa-check"></i> 
 
     </td> 
 
     <td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

JSFiddle

Answer 2

這樣？

$(document).on("click", ".movemultiple", function(event){ 
    $('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove(); 
}); 

退房小提琴：http://jsfiddle.net/h9q8o340/