JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<table id="table1" style="background-color: Lime" class="displayTable">
      <caption>Table 1</caption>
      <thead>
          <tr>
              <th>Numero1</th>
              <th>Numero2</th>
              <th>opcion</th>
          </tr>
      </thead>
      <tbody>
          <tr id="row1">
              <td>145</td>
              <td>200</td>
              <td>
                  <a href="#" id="row2Link" class="rowLink">Mover</a> |            
              </td>
          </tr>
          <tr id="row2">
              <td>49</td>
              <td>776</td>
              <td>
                  <a href="#" id="row2Link" class="rowLink">Mover</a> |            
              </td>
          </tr>
          <tr id="row3">
              <td>636</td>
              <td>41</td>
              <td>
                  <a href="#" id="row2Link" class="rowLink">Mover</a> |            
              </td>
          </tr>
      </tbody>
  </table>
  <table id="table2" style="background-color: Yellow; margin-top: 30px;" class="displayTable">
      <caption>Table 2</caption>
      <thead>
          <tr>
              <th>Numero1</th>
              <th>Numero2</th>
              <th>opcion</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>

JavaScript

// Setup the "Move Me" links
$(".rowLink").click(function () {
    // get the row containing this link 
    var row = $(this).closest("tr");
 
    // find out in which table it resides
  var table = $(this).closest("table");
  // alert(row[0].cells[0].innerText+"-");
   var aux = row[0].cells[0].innerText
   row[0].cells[0].innerText=row[0].cells[1].innerText
   row[0].cells[1].innerText=aux;
   // move it
   row.detach();
 
    if (table.is("#table1")) {
        $("#table2").append(row);
    }
    else {
        $("#table1").append(row);
    }
 
    // draw the user's attention to it
    row.fadeOut();
    row.fadeIn();
});