javascript - 如何将选定的表 tr 移动到另一个表？

Question

我有两个表 mytable1 和 mytable2 我正在尝试将选中的 tr 行(从表 mytable1)移动到不同的表 mytable2

我试过如下

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

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