jQuery通過數據屬性隱藏\顯示錶中的行

我有一個表，#thetable其中包含數據庫中的行。在表格上方我有一個button'柴油'，當點擊隱藏或顯示數據屬性爲柴油的行時，所以每行都有一個data-attribute，即diesel或petrol。但是，當我點擊它的行不會消失。jQuery通過數據屬性隱藏顯示錶中的行

幫助將不勝感激。

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>

來源

2017-08-31 Jim

我把你的代碼放在一個可運行的代碼片段中，它看起來工作正常。你能否在你的代碼的其他地方查看控制檯的錯誤。另外 - 表格中的數據是在頁面本身加載後添加到頁面中的？例如通過AJAX。另外，另外，我建議刪除過時的'on *'事件屬性，並通過不顯眼的JS來附加事件處理程序。 –

嘗試使用'.hide（）'而不是改變可見性。隱藏的可見性在渲染時仍佔用相同的空間，這可能導致「不要消失」的問題。 –

偉大的工程完美，我確實使用.hide（）。 – Jim

嘗試

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

來源

2017-08-31 08:44:13 filo

https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers –

試過了，但它們並沒有消失 – Jim

的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>

來源

2017-08-31 09:13:53 Isma

jQuery通過數據屬性隱藏\顯示錶中的行

回答

相關問題