jQuery非表示\データの属性を介してテーブルの行を表示

Question

私はテーブル、#thetableデータベースからの行が含まれています。テーブルの上にはbutton「ディーゼル」があります。クリックしてデータ属性がディーゼルである行を表示する場合は、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> 

Answer 2

例えば、ボタンにIDを追加してみてください：

<button type="button" id="hideRowBtn" class="btn btn-default" style="margin-right: 1em"> 
    diesel 
    <span style="color: Green"> 
    <i class="fa fa-check"></i> 
    </span> 
</button> 

は、その後、あなたのサイトの頭の中でこれを追加します。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#hideRowBtn').on('click', function() { 
       $("tr[data-fuel='diesel']").hide(); 
     }); 
    }); 
</script>