JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<table>
    <tr id="1">
        <th>kop 1</th>
         <th>kop 2</th>
         <th>kop 3</th>
         <th>kop 4</th>
    </tr>
    <tr id="2">
        <td id="cell1"><input type="button" name="button" value="test"></td>
        <td>veld 2B</td>
        <td>veld 3B</td>
        <td>veld 4B</td>
    </tr>
      <tr id="4">
        <td id="cell2">veld 1C</td>
        <td>veld 2C</td>
        <td>veld 3C</td>
        <td>veld 4C</td>
    </tr>
    
    
</table>

CSS

.cell{background-color:#AFAFAF;}
table{border:1px solid red;}
th, td{border:1px solid blue;}

JavaScript

// moving object from one table cell to other with animation

var $old = $('#cell1 input');
//First we copy the arrow to the new table cell and get the offset to the document
var $new = $old.clone().appendTo('#cell2');
var newOffset = $new.offset();
//Get the old position relative to document
var oldOffset = $old.offset();
//we also clone old to the document for the animation
var $temp = $old.clone().appendTo('body');
//hide new and old and move $temp to position
//also big z-index, make sure to edit this to something that works with the page
$temp
  .css('position', 'absolute')
  .css('left', oldOffset.left)
  .css('top', oldOffset.top)
  .css('zIndex', 1000);
$new.hide();
$old.hide();
//animate the $temp to the position of the new item
$temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
   //callback function, we remove $old and $temp and show $new
   $new.show();
   $old.remove();
   $temp.remove();
});