如何在HTML/Javascript中有条件地隐藏表格行？

kkih6yb8 于 2023-06-04 发布在 Java

关注(0)|答案(4)|浏览(439)

StackOverflow的新手-所以感谢所有可能提供帮助的人。
我们用于向客户在线提供报价的应用程序输出HTML，我可以大部分自定义。有一种类型的行是输出，我想在HTML中有条件地抑制。
HTML看起来像：

<tr class="row-heading">
                <td colspan="3" class="col-description">
                    P=
                </td>
                <td class="col-picture">

                </td>
                <td class="col-unit-price">
                </td>
                <td class="col-extended-price">
                </td>
            </tr>

当“col-description”类中的数据是P=时，我想用row-heading类来抑制整个表行。
我很擅长HTML和CSS，但JavaScript不太擅长。在发布之前我做了一些研究，我看到了一些关于需要.hide（）的东西，但我不知道如何制定这种类型的JavaScript。
另外，在HTML呈现的页面中，这个JavaScript需要存在于哪里？一开始？最后呢？在一个街区？
提前感谢您的帮助和建议！

JavaScript

来源：https://stackoverflow.com/questions/38492669/how-do-i-hide-a-table-row-conditionally-in-html-javascript

4条答案

按热度按时间

xzv2uavs1#

通常，您会将JavaScript添加到整个html之后的<script>中，以便在加载html时应用它。
现在，您的任务有两个部分：找到所有要隐藏的元素并隐藏它们。既然你用jQuery标记了这个，我想使用jQuery是可以的。要查找包含P=的单元格，您可以使用此自定义:contains选择器：

var $cells = jQuery('td:contains("P=")');

要获取行，必须使用parent()方法：

var $rows = jQuery('td:contains("P=")').parent();

最后，你想隐藏它们，所以隐藏它们：

jQuery('td:contains("P=")').parent().hide();

最后一行是你想要的，据我理解你的问题。
但正如人们所提到的，这种问题在这里是不鼓励的。您应该尝试使用其他来源学习基础知识，并在这里询问您是否有非基础水平的具体问题。

赞(0）回复(0）举报 2023-06-04

hk8txs482#

基本的想法是检查当你想隐藏一些东西时的一些条件。如果你确实添加了:hidden或者甚至有一个css类，你可以创建.hide并执行display:none;。如果您不想显示它，请添加一个类.addClass('hide')
这只是一个想法，有这么多的事情你可以做，如果我是你，我会玩弄display:none和使用.addClass和.removeClass