javascript - css遍历元素的方法

Question

我有一个简单的表格结构，我可以通过单击向上和向下按钮来更改表格行的顺序。现在我想要实现的是，当一行成为顺序中的第一行时，向上按钮应该被禁用，当一行成为列表中的最后一行时，向下按钮应该被禁用，为了实现这种禁用效果，我只想使用 css。这有可能吗？如何使用 css 到达/遍历向上和向下按钮。

$(".order").click(function() {
  var prevTr = $(this).closest('tr').prev('tr');
  var nextTr = $(this).closest('tr').next('tr');
  var currentTr = $(this).closest('tr');
  var getClick = $(this).data('rel');
  (getClick > 1) ? currentTr.insertAfter(nextTr): currentTr.insertBefore(prevTr);
});

/*adding red color to show disabled effect */


 table tr:last-child  td:first-child .order:first-child  {

   background: red;

 }

 table tr:first-child td:first-child .order:first-child {

   background: red;

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>
      <button data-rel="1" class="order">Up</button>
    </td>
    <td>
      <button data-rel="2" class="order">Down</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <button data-rel="1" class="order">Up</button>
    </td>
    <td>
      <button data-rel="2" class="order">Down</button>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>
      <button data-rel="1" class="order">Up</button>
    </td>
    <td>
      <button data-rel="2" class="order">Down</button>
    </td>
  </tr>
  <tr>
    <td>4</td>
    <td>
      <button data-rel="1" class="order">Up</button>
    </td>
    <td>
      <button data-rel="2" class="order">Down</button>
    </td>
  </tr>

Answer 1

Working fiddle

是的，你可以做到，请尝试以下操作:

table tr:first-child td:nth-child(2){
    display:none;
}

table tr:last-child td:nth-child(3){
    display:none;
}   

这将隐藏按钮，要禁用它，请尝试:

opacity: 0.65; 
cursor: not-allowed;

代替:

display:none;

希望这对您有所帮助。