選択したテーブルtrを別のテーブルに移動するにはどうすればいいですか？

Question

私は

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

を次のように試してみました、私は別のテーブルにmytable2

を確認TR行（テーブルmytable1から）を移動しようとしていますmytable1とmytable2 2つのテーブルを持っています

どうすればいいですか？

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

Answer 1

あなたはDOMからチェックボックスで表のセルを削除するために最も近いテーブルの行（または表のセル）とjQuery .remove()を取得するjQueryの.closest()を使用することができます。

$(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/