Javascript sort column disable arrow up on first row and arrow down on last row

Question

This is simple question, but don't know how to achieve it.

I'm working with sort column using jQuery.

$(document).ready(function(){
    $(".up,.down,.top,.bottom").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else if ($(this).is(".down")) {
            row.insertAfter(row.next());
        } else if ($(this).is(".top")) {
            //row.insertAfter($("table tr:first"));
            row.insertBefore($("table tr:first"));
        }else {
            row.insertAfter($("table tr:last"));
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
</table>

Answer 1

that ? (simply CSS + get rowIndex value [in case of keyboard return])

const tableTbody = document.querySelector('table tbody')
  ,   FirstUp    = tableTbody.querySelector('tr:first-of-type').rowIndex
  ,   LastDown   = tableTbody.querySelector('tr:last-of-type').rowIndex
  ;
tableTbody.onclick = e =>
  {
  if (!e.target.matches('a[data-mv]')) return

  let rIndex = e.target.closest('tr').rowIndex

  switch (e.target.dataset.mv)
    {
    case 'up':
      if (rIndex != FirstUp)
        tableTbody.insertBefore(tableTbody.rows[rIndex], tableTbody.rows[rIndex-1])
      break
    case 'down':
      if (rIndex != LastDown)
        tableTbody.insertBefore(tableTbody.rows[rIndex+1], tableTbody.rows[rIndex])
      break
    }
  }

#myTable tbody tr:first-of-type a[data-mv=up],
#myTable tbody tr:last-of-type  a[data-mv=down] {
  cursor          : not-allowed;
  pointer-events  : none;
  opacity         : 0.5;
  text-decoration : none;
}

<table id="myTable">
  <tbody>
    <tr>
      <td>One</td>
      <td> <a href="#" data-mv="up">Up</a> <a href="#" data-mv="down">Down</a> </td>
    </tr>
    <tr>
      <td>Two</td>
      <td> <a href="#" data-mv="up">Up</a> <a href="#" data-mv="down">Down</a> </td>
    </tr>
    <tr>
      <td>Three</td>
      <td> <a href="#" data-mv="up">Up</a> <a href="#" data-mv="down">Down</a> </td>
    </tr>
    <tr>
      <td>Four</td>
      <td> <a href="#" data-mv="up">Up</a> <a href="#" data-mv="down">Down</a> </td>
    </tr>
    <tr>
      <td>Five</td>
      <td> <a href="#" data-mv="up">Up</a> <a href="#" data-mv="down">Down</a> </td>
    </tr>
  </tbody>
</table>