jQuery onClick行将行移动到另一个表

时间:2018-08-02 01:41:39

标签: javascript jquery

我想要当我单击表1的行然后移到表2时 同样在表2中,我们可以被取消,然后返回到表1。

有关此问题的任何解决方案?

var ids_selected = [];
var rows_selected = [];
$('#part-table').delegate('tr', 'click', function() {

if ($('#part-table #part-show tr').length === 1) {
    html = '<tr id="no-data"><th style="text-align:center;" class="table-conf even" colspan="13">No data found</th></tr>';
}
$('#part-table > tbody').html(html);

var $this = this;

var id = $(this).attr('id'),
         latest_no = $(this).children('td:eq(2)').text(),
         part_name = $(this).children('td:eq(3)').text(),
         loc;

rows_selected.push(this);
ids_selected.push(id);
loc = id.replace('id_part', '');
loctab = $.inArray(id, ids_selected);                                  '</tr>');
$('#partreq-table tr:eq('+loctab+') td:eq(0)').html(latest_no);
$('#partreq-table tr:eq('+loctab+') td:eq(1)').html(part_name+'<i class="fa fa-times eks" aria-hidden="true" id="'+id+'"></i>');
$(this).remove();});

here is the pic of my tables

谢谢

1 个答案:

答案 0 :(得分:2)

检查以下示例。

$('tbody').on('click','tr',function(){
    myParent=$(this).closest('table').attr('id');
    if(myParent == "table1") $('#table2 tbody').append('<tr>'+$(this).html()+'</tr>');
    else $('#table1 tbody').append('<tr>'+$(this).html()+'</tr>');
    $(this).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table1">
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>1</td>
    <td>11</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10</td>
  </tr>  
  <tr>
    <td>3</td>
    <td>6</td>
  </tr>    
 </tbody>
</table>

<br/>

<table id="table2">
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>4</td>
    <td>15</td>
  </tr>  
 </tbody>
</table>