JSFiddle - React, Tailwind, and code Playground

by 林 羿緯

HTML

<html>
  <body>
    <div id="DIV1">
      <table id="leftTable">
      
      </table>
    </div>
    <div id="DIV2">
       <table id="rightTable">
      
      </table>
    </div>
  </body>
</html>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

CSS

#DIV1{
width:200px;
line-height:50px;
padding:20px;
border:2px blue solid;
margin-right:10px;
float:left;
}
#DIV2{
width:200px;
line-height:50px;
padding:20px;
border:2px green solid;
float:left;
}
button{
  width:50px;
  height:50px;
}

JavaScript

$(document).ready(function(){
	for(var i =0 ;i<4;i++){
		$('#leftTable').append(
    `<tr>
      <td><button id="left`+(i*4+1)+`">原左`+(i*4+1)+`</td>
      <td><button id="left`+(i*4+2)+`">原左`+(i*4+2)+`</td>
      <td><button id="left`+(i*4+3)+`">原左`+(i*4+3)+`</td>
      <td><button id="left`+(i*4+4)+`">原左`+(i*4+4)+`</td>
    </tr>
    `
    )
  }
		for(var i =0 ;i<4;i++){
		$('#rightTable').append(
    `<tr>
      <td><button id="right`+(i*4+1)+`">原右`+(i*4+1)+`</td>
      <td><button id="right`+(i*4+2)+`">原右`+(i*4+2)+`</td>
      <td><button id="right`+(i*4+3)+`">原右`+(i*4+3)+`</td>
      <td><button id="right`+(i*4+4)+`">原右`+(i*4+4)+`</td>
    </tr>
    `
    )
  }
  $('#leftTable').on('click', 'button', function(){
  	var $clickButton = $(this);
    if($('#rightTable tr:last-child').length < 4){
        $('#rightTable tr:last-child').append($clickButton)
    }
    else{
    	$('#rightTable').append(
      	`<tr><td>`+$clickButton+`</td></tr>`
      )
    }
    //$clickButton.parent.empty();
  })

	
  
})