jQuery hide\show 行 table 通过数据属性

Question

我有一个 table，#thetable，其中包含来自数据库的行。在 table 上方，我有一个 button 'diesel'，当我单击以隐藏或显示其数据属性为柴油的行时，我想要它，因此每一行都有一个 data-attribute，它是 diesel 或 petrol。但是，当我单击它时，线条不会消失。

将不胜感激。

function clickDiesel() {
  $("tr[data-fuel=diesel]").css('visibility', 'hidden');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default" style="margin-right: 1em" onclick="clickDiesel()">
  diesel 
  <span style="color: Green">
    <i class="fa fa-check"></i>
  </span>
</button>

<table id="thetable">
  <tr data-fuel="diesel">
    <td>diesel</td>
  </tr>
  <tr data-fuel="petrol">
    <td>petrol</td>
  </tr>
</table>

Answer 1

试试

<script>
function clickDiesel()
{
    $("tr[data-fuel='diesel']").css('visibility', 'hidden');
}
</script>

jQuery hide\show 行 table 通过数据属性

jQuery hide\show rows in table via data attribute

jquery

rows

show-hide