表格行重新排序中上下按钮的显示

Question

我正在使用这个 jsfiddle: http://jsfiddle.net/vaDkF/828/ （不包含上下选项）创建一个重新排序表格。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

我想知道是否可能在表格的第一行隐藏“向上”按钮（显示为无），并且在表格的最后一行隐藏“向下”按钮。谢谢！

- Jessica C

Answer 1

您可以使用CSS完成此操作，使用first-child和last-child选择器：

tr:first-child .up, tr:last-child .down {
  display:none;
}

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

tr:first-child .up,
tr:last-child .down {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Updated Demo

- DaniP

---

那比我之前尝试的要简单得多。非常感谢！ - Jessica C

:P @JessicaC 很高兴帮助你 - DaniP