Question

我有一个简单的表结构，我可以通过单击向上和向下按钮来更改表行的顺序。现在我想要实现的是当一行成为订单中的第一行时，向上按钮应该被禁用，当一行成为列表中的最后一行时，应禁用向下按钮并实现此禁用效果我只想使用css.So是否可能？我如何使用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;

希望这有帮助。

Answer 2

：first-child是CSS 2.1选择器之一，因此可用于IE8

如果您对此有任何疑问，可以使用旧浏览器的功能，此资源非常有用。

http://caniuse.com/#feat=css-sel2

如何遍历css中的元素

2 个答案: