将表格中的一行转移到另一个：jQuery

时间：2018-07-23 08:35:18

标签： jquery html-table

我要转移使用jQuery函数选择的行：

$(document).ready(function(){
    $("#table1 tbody tr").click(function()
    {
        $(this).toggleClass('selected');
    });
});

$(document).ready(function(){
    $("#table2 tbody tr").click(function()
    {
        $(this).toggleClass('selected');
    });
});

和应该传送一行的函数是这个：

 //fonction deplacement de tableau
$(document).ready(function(){
    $('.table-remove').click(function (e) {
         $("#table1 > tbody  > tr").each(function () {
             if($(this).attr('class')=="selected")
                {
                    $(".table2").append( $(this).parents('tr').clone());
                    $(this).parents('tr').detach();
                    console.log( $(this).parents('tr'));
                }
             });
    })
})

这两行我有些麻烦：

$(".table2").append( $(this).parents('tr').clone());
$(this).parents('tr').detach();

你知道为什么吗？ 这是2个表格的HTML：

 <table class="table table-bordered table-condensed table-striped text-center table-hover table-condensed formatHTML5" id="table1">
 <thead>
 <tr>
     <th class="test">Ordre</th>
     <th style="display:none" class="text-center test3">Nom Pross</th>
     <th class="text-center test3">Verbe</th>
     <th class="text-center test4">Nom Opération</th>
     <th class="text-center test">Mini</th>
     <th class="text-center test">Maxi</th>
     <th class="text-center test">Total</th>
     <th class="text-center test">Mesure</th>
     <th class="text-center test">Retour</th>
     <th class="text-center test">Dépla</th>
     <th style="display:none">Tps Total</th>
     <th style="display:none">Tps Mesure</th>
     <th style="display:none">Tps Retour</th>
     <th style="display:none">TDA</th>
     <th  class="ellipsis text-center test">% Opera</th>
     <th style="display:none" class="text-center test2">Loc</th>
     <th class="text-center test2 ">Cible</th>
     <th class="text-center ">tktTime</th>
</tr>
</thead>
<tbody>
 <tr th:each="LIST : ${LigneAvant}">
    <td  class="test" style="white-space:nowrap" th:text="${LIST[0]}" ></td>
    <td  style="display:none" class="text-center test3 "  th:text="${LIST[1]}" ></td>
    <td  class="text-center test3 " style="white-space:nowrap" th:text="${LIST[2]}" ></td>
    <td  class="text-center test4 " style="white-space:nowrap" th:text="${LIST[3]}" ></td>  
    <td class="text-center test" style="white-space:nowrap" th:text="${LIST[4]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[5]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[6]}" ></td>   
    <td  class="ellipsis text-center test" th:text="${LIST[7]}" ></td>
    <td  class="ellipsis text-center test" th:text="${LIST[8]}" ></td>
    <td  class="ellipsis text-center test" th:text="${LIST[9]}" ></td>
    <td style="display:none" th:text="${LIST[10]}" ></td>
    <td style="display:none" th:text="${LIST[11]}" ></td>
    <td style="display:none" th:text="${LIST[12]}" ></td>
    <td style="display:none" th:text="${LIST[13]}" ></td>   
    <td class="ellipsis test" th:text="${LIST[14]}" ></td>
    <td  style="display:none" class="ellipsis test2 text-center" th:text="${LIST[15]}" ></td>
    <td class="ellipsis test2 text-center" th:text="${LIST[19]}" ></td>
    <td class="ellipsis" th:text="${LIST[20]}" ></td>       
     </tr>
     </tbody>
 </table>
   </div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
   <table class="table table-bordered table-condensed table-striped text-center table-hover table-condensed formatHTML5" id="table2">
  <thead>
 <tr>
     <th class="test">Ordre</th>
     <th style="display:none" class="text-center test3">Nom Pross</th>
     <th class="text-center test3">Verbe</th>
     <th class="text-center test4">Nom Opération</th>
     <th class="text-center test">Mini</th>
     <th class="text-center test">Maxi</th>
     <th style="display:none">Tps Total</th>
     <th style="display:none">Tps Mesure</th>
     <th style="display:none">Tps Retour</th>
     <th style="display:none">TDA</th>
     <th class="text-center test">Total</th>
     <th class="text-center test">Mesure</th>
     <th class="text-center test">Retour</th>
     <th class="text-center test">TDA</th>
     <th class="text-center test">Op</th>
     <th style="display:none" class="text-center test2">Loc</th>
     <th class="ellipsis test2 text-center">Cible</th>
     <th style="white-space:nowrap">tktTime</th>
</tr>
</thead>
 <tbody>
 <tr th:each="LIST : ${LigneApres}">
    <td  class="test" style="white-space:nowrap" th:text="${LIST[0]}" ></td>
    <td style="display:none" class="text-center test3 " th:text="${LIST[1]}" ></td>
    <td  class="text-center test3 " style="white-space:nowrap" th:text="${LIST[2]}" ></td>
    <td  class="text-center test4 " style="white-space:nowrap" th:text="${LIST[3]}" ></td>  
    <td class="text-center test" style="white-space:nowrap" th:text="${LIST[4]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[5]}" ></td>   
    <td style="display:none" th:text="${LIST[6]}" ></td>    
    <td style="display:none" th:text="${LIST[7]}" ></td>
    <td style="display:none" th:text="${LIST[8]}" ></td>
    <td style="display:none" th:text="${LIST[9]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[10]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[11]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[12]}" ></td>
    <td class="ellipsis text-center test" th:text="${LIST[13]}" ></td>  
    <td class="ellipsis test" th:text="${LIST[14]}" ></td>
    <td style="display:none" class="ellipsis test2 text-center" th:text="${LIST[15]}" ></td>
    <td class="ellipsis test2 text-center" th:text="${LIST[19]}" ></td>
    <td class="ellipsis" th:text="${LIST[20]}" ></td>       
     </tr>
     </tbody>
 </table>

我不为什么不能将所选行附加到另一个表。你有一些线索吗？

1 个答案:

答案 0 :(得分：0)

您可以通过jQuery insertAfter()函数执行此操作。检查下面的更新的片段... 

$('table tr').click(function(){
$(this).addClass('selected').siblings('tr').removeClass('selected');
})
$('.remove').click(function(){
$('#table2 tbody').append('<tr>'+$('#table1 tr.selected').html()+'</tr>');
})
.selected td {
    background: #ffffcf;
}
table{
    width: 100%;
    border-collapse: collapse;
}
td{
    border: 1px solid #ddd;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="remove">Remove Selected</button>
<h2>Table1</h2>
<table id="table1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
<tr>
<td>Row5</td>
</tr>
<tr>
<td>Row6</td>
</tr>
</table>
<h2>Table2</h2>
<table id="table2">
<tr>
<td>Row21</td>
</tr>
<tr>
<td>Row22</td>
</tr>
<tr>
<td>Row23</td>
</tr>
<tr>
<td>Row24</td>
</tr>
<tr>
<td>Row25</td>
</tr>
<tr>
<td>Row26</td>
</tr>
</table>

相关问题
最新问题