Javascript 排序列禁用第一行的向上箭头和最后一行的向下箭头答案

【问题标题】：Javascript sort column disable arrow up on first row and arrow down on last rowJavascript 排序列禁用第一行的向上箭头和最后一行的向下箭头
【发布时间】：2021-04-16 09:13:55
【问题描述】：

这是一个简单的问题，但不知道如何实现。

我正在使用 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>

现在我需要：

在第一行禁用“向上”
在最后一行禁用“向下”

这将始终禁用第一行和最后一行，即使我将另一行移到第一行或最后一行。

【问题讨论】：

您想“将其变灰”（CSS）还是“在单击时引发错误消息”（即检查它是否是 JavaScript 中的第一行/最后一行）？
是的，将其变灰并由pointer-events: none禁用
嗨，把它变灰并禁用指针事件。但我不知道要设置条件。
那么有2个选项：（1）在移动行之前从第一行删除类，然后再添加，或者（2）只移动内容/td，而不是整行。
（或者只使用CSS来选择第一行/最后一行。除了答案还有stackoverflow.com/questions/41545623/…stackoverflow.com/questions/18850033/…）

标签： javascript

【解决方案1】：

那个？（只需 CSS + 获取 rowIndex 值[在键盘返回的情况下]）

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>

【讨论】：