InsertAfter()在空表上失败

时间:2018-07-23 12:37:36

标签: jquery html

我有一个将行从一个表转移到另一个表的功能,反之亦然。 效果很好,但是当表为空时,功能不再起作用。

for i in range(len(v1)): # Assuming both v1 and v2 are the same length.
    print(v1[i])
    print(v2[i])

这是小提琴https://jsfiddle.net/Ln7o4vzs/

2 个答案:

答案 0 :(得分:1)

然后,您可以使用appendTo()代替insertAfter()

$(document).ready(function(){

    //fonction déplacement du tableau Avant au tableau Après
    $('.table-bougesurApres').click(function (e) {
        $('#table1 tr.selected').appendTo('#table2 tbody');
    });

    //fonction déplacement du tableau Après au tableau Avant
    $('.table-bougesurAvant').click(function (e) {
        $('#table2 tr.selected').appendTo('#table1 tbody');
    });

});  

工作Fiddle here

答案 1 :(得分:0)

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

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




//fonction deplacement du tableauAvant au tableauApres
	$('.table-bougesurApres').click(function (e) {
	  $('#table2 tbody').append($( "#table1 tr.selected" ));
  })


//fonction deplacement du tableauApres au tableauAvant
	$('.table-bougesurAvant').click(function (e) {											 
	  $('#table1 tbody').append($( "#table2 tr.selected" ));
  })
})	
.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="table-bougesurApres">table1 vers table2</button>
<button type="button" class="table-bougesurAvant">table2 vers table1 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>