JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table>
  <tr id="row1">
    <td>
      <button class="up_arrow">UP</button>
    </td>
    <td>
      <input value="1">
    </td>
    <td>
      <select>
        <option>1</option>
      </select>
    </td>
    <td>
      <select>
        <option>1a</option>
      </select>
    </td>
  </tr>
  <tr id="row2">
    <td>
      <button class="down_arrow">DOWN</button>
    </td>
    <td>
      <input value="2">
    </td>
    <td>
      <select>
        <option>2</option>
      </select>
    </td>
    <td>
      <select>
        <option>2a</option>
      </select>
    </td>
  </tr>
</table>

JavaScript

$(document).ready(function(){
    $('.up_arrow, .down_arrow').on('click',function () { 
        var objRow = $(this).parents("tr");
				console.log(objRow);
        var intCurrentInnerHTML = objRow.find("td").html();
        if ($(this).is('.up_arrow')) {
            var intPreviousInnerHTML= objRow.prev("tr").find("td").html();
            objRow.find("td").html(intPreviousInnerHTML);
            objRow.prev("tr").find("td").html(intCurrentInnerHTML);             
                }
            };
        }
        else {
            var intNextInnerHTML = objRow.next("tr").find("td").html();
            objRow.find("td").html(intNextInnerHTML);
            objRow.next("tr").find("td").html(intCurrentInnerHTML);
        }
    });
});