如何使用内联 JavaScript 或 CSS 隐藏 TD 标签？

Posted 2023-02-21

【中文标题】如何使用内联 JavaScript 或 CSS 隐藏 TD 标签？

【英文标题】：How can I hide a TD tag using inline JavaScript or CSS?

【发布时间】：2010-10-29 07:51:41

【问题描述】：

如何使用 javascript 或内联 CSS 隐藏 <td> 标记？

【参考方案1】：

使用 css 一切皆有可能（或几乎），只需使用：

display: none; //to hide

display: table-cell //to show

【参考方案2】：

<td style = "display:none" >
<p> Content display none </p>
</td>

或

<td style="visibility:hidden"> Your content is hidden </td>

请注意：2 这些方式是不同的。你应该试试看结果。

【参考方案3】：

我们可以使用下面的内联 css 来隐藏 a 中的内容：

<div style="visibility:hidden"></div>

例如：

<td><div style="visibility:hidden">Your Content Goes Here:</div></td>

【参考方案4】：

您可以简单地通过包含样式属性来隐藏<td> 标记内容：style = "display:none"

例如

<td style = "display:none" >
<p> I'm invisible </p>
</td>

【参考方案5】：

.hide

visibility: hidden



<td class="hide"/>

编辑- 只为你

显示和可见性的区别是这样的。

“display”： 有很多属性或值，但您关注的是“none”和“block”。 “none”就像一个隐藏值，“block”就像一个显示。如果您使用“none”值，您将完全隐藏您应用此 css 样式的任何 html 标记。如果您使用“块”，您将看到 html 标记及其内容。很简单。

“可见性”：有很多值，但我们想了解更多关于“隐藏”和“可见”值的信息。 "hidden" 的工作方式与 display 的 "block" 值相同，但这将隐藏标签及其内容，但不会隐藏该标签的物理空间。例如，如果您有几行文本，然后是图像（图片），然后是一个三列两行的带有图标和文本的表格。现在，如果您将具有隐藏值的可见性 css 应用于图像，图像将消失，但图像使用的空间将保留在其位置，换句话说，您将在文本和文本之间以大空间（孔）结束桌子。现在，如果您使用“可见”值，您的目标标签和它的元素将再次可见。

【讨论】：

显示怎么样：无；那行得通吗？ （跨浏览器等）。

visibile:hidden- 隐藏元素，但节省其占用的空间； display:none - 不仅隐藏元素，还消除了空间

【参考方案6】：

如果您在 javascript 中有更多内容，请考虑使用一些 javascript 库，例如jquery 会稍微加快速度，但会提供更易读的代码。

您的问题代码来自jquery：

$("td").hide();

当然还有其他 javascript 库，如 this comparison on wikipedia 所示。

【参考方案7】：

你期望在它的地方发生什么？表格无法重排以填充剩余空间 - 这似乎是浏览器响应错误的秘诀。

考虑隐藏 td 的内容，而不是 td 本身。

【讨论】：

但是，即使宽度设置为 0，隐藏单元格之间也会有多余的空间。

【参考方案8】：

隐藏任何内容的方式相同：visibility: hidden;

【讨论】：

显示怎么样：无；那行得通吗？ （跨浏览器等）。

display:none 根据我的经验，你 95% 的时间都想要什么

可见性隐藏了元素而不改变文档的流程，因此应该避免 edeverett 担心的那种问题。

@simon 是的，可能是这样，但我仍然会在 IE 中对其进行大量测试，我的蜘蛛感觉警告我它可能会导致问题。我在 IE 和表格方面有太多糟糕的经历。

嗯，这对所有事情都是个好建议 - 总是假设 IE 会搞砸它，你不会出错！