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>

Now I need to :

Disable "Up" on the first row
Disable "Down" on the last row

This will be always disable first and last row even I move another row to first or last.

Do you want to "gray it out" (CSS) or "raise an error message when it's clicked" (i.e. check if it's the first/last row in JavaScript)? — user202729, Jan 11 '21 at 12:18
Hi, just gray it and disable the pointer event. But I don't know to put the condition. — HiDayurie Dave, Jan 11 '21 at 12:31
Then there are 2 options: (1) remove the class from the first row before moving the rows around then add it later, or (2) only move the content/td, not the whole row. — user202729, Jan 11 '21 at 13:13
(or just use CSS to select the first/last row. Besides the answer there's https://stackoverflow.com/questions/41545623/css-selector-for-first-row-in-a-table https://stackoverflow.com/questions/18850033/set-css-style-only-to-first-row-of-the-table ) — user202729, Jan 11 '21 at 13:22

Mister Jojo · Accepted Answer · 2021-01-11T15:04:32.860

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>

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

1 Answers1