如何将选定的表tr移动到另一个表?

时间:2017-01-23 15:21:10

标签: javascript jquery

我有两张表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/

2 个答案:

答案 0 :(得分:2)

您可以使用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

答案 1 :(得分:0)

像这样?

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

查看小提琴:http://jsfiddle.net/h9q8o340/