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通过数据属性隐藏\显示表中的行

回答

相关问题