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

How do I hide a table row conditionally in HTML/Javascript?

本文关键字：有条件 隐藏 Javascript HTML      更新时间：2023-09-26

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=时，我想用行标题类来抑制整个表行。

我很擅长HTML和CSS，但JavaScript就不那么好了。在发布之前，我做了一些研究，发现了一些关于需要.hide（）的内容，但我不知道如何制定这种类型的JavaScript。

此外，在HTML呈现的页面中，这个JavaScript需要驻留在哪里？一开始？最后？在街区里？

提前感谢您的帮助和建议！

通常，您会在整个html之后的<script>中添加JavaScript，以便在加载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();

就我理解你的问题而言，后一行是你想要的。

但正如大家所提到的，这种问题在这里是不鼓励的。你应该尝试使用其他来源学习基础知识，如果你有非基础水平的具体问题，请在这里提问。

基本思想是在想要隐藏某些内容时检查是否存在某些条件。如果您确实添加了:hidden，或者甚至有一个css类，那么您可以创建.hide并执行display:none;。假设您不想显示它，则添加一个类.addClass('hide')

这只是一个想法，你可以做很多事情，如果我是你，我会摆弄display:none，使用.addClass和.removeClass

我也有类似的需求，并能够使用实现这一点

列表（"；，可变1，可变2，等)

变量要么是空白的，要么是表格行的html标签（如果不是空白）

这在没有jQuery或JavaScript 的情况下运行得很好

您可以尝试设置要显示的样式：none。

相关文章：