Jquery隐藏表格行

Posted 2023-02-25

【中文标题】Jquery隐藏表格行

【英文标题】：Jquery Hide table rows

【发布时间】：2010-05-22 17:32:03

【问题描述】：

我隐藏了一堆文本框，它工作正常，问题是，文本框在一个表格中，所以我还需要隐藏相应的标签。 结构是这样的

<tr>
<td>
Label
</td>
<td>
InputFile
</td>
</tr>

事实上，如果我隐藏有 fileinput 的行会更容易，有人可以帮忙

【问题讨论】：

你能澄清一下'fileinput'或'InputFile'实际上指的是什么吗？是某个类的“输入类型=”文本”，还是“输入类型=”文件”？

【参考方案1】：

这可能对你有用...

$('.trhideclass1').hide();

 

<tr class="trhideclass1">
  <td>Label</td>
  <td>InputFile</td>
</tr>

【讨论】：

在我看来，为了维护和可读性，最好保持标记尽可能干净和简洁。

（另外，问题的意图肯定是“如何隐藏包含给定元素的元素”，而不仅仅是“如何隐藏具有给定类的元素”）

感谢 Derek，在这种情况下，您的回答是最好的解决方案

非常感谢，这是我不得不对表单进行大量更改的大项目的救命稻草：)

【参考方案2】：

你只需要像这样遍历 DOM 树到最近的<tr>...

$("#ID_OF_ELEMENT").parents("tr").hide();

jQuery API Reference

【讨论】：

我认为应该是 parents()，而不是 parent()

投反对票-1。 parent() 获取第一个元素。 parents() 是正确的用法。

@Bobby @ICodeForCoffee 你们是对的；我已经更新了答案

parents("tr") 会隐藏上面的任何 tr 。如果您在表格中有表格，则此解决方案不起作用。改用最接近（“tr”）

【参考方案3】：

这应该可以解决问题。

$(textInput).closest("tr").hide();

【参考方案4】：

$('inputFile').parent().parent().children('td > label').hide();

可以帮助您向上导航两个级别（到 TD，到 TR），向下移动两个级别（该 TR 中的所有 TD 及其 LABEL 标签），在那里应用 hide() 函数。

如果您想留在 TR 级别并隐藏它们：

$('inputFile').parent().parent().hide();

……就足够了。

您可以使用 jquery 选择器轻松浏览元素。

parent 记录在这里： http://api.jquery.com/parent/

hide 记录在这里： http://api.jquery.com/hide/

【参考方案5】：

html

<tr><td><a href="" onclick=hideRow(event)></a></td></tr>

jquery

function hideRow(event)
  $(event.target || event.srcElement).parents('tr').hide();

【参考方案6】：

如果标签在表格行中，您可以这样做来隐藏该行：

('.InputFile').parent().Hide()

您可以根据需要优化选择器，然后获取包含该元素的表格行。

JQuery 选择器帮助：http://api.jquery.com/category/selectors/

编辑这是正确的做法。

    ('.InputFile').parents('tr').hide()

【讨论】：

-1 输入控件的父级为<td>，隐藏方法为小写

【参考方案7】：

使用parents('tr').hide() 有效。但是，如果存在嵌入表，则所有父 tr 行都将被隐藏。在我的例子中，整个表单是隐藏的，因为有很多嵌入的表格。

【参考方案8】：

如果您希望同时隐藏文本字段和标签，我认为最好的选择是为每个字段分配一个类并像这样隐藏它们：

jQuery(".labelClass, .inputClass").hide();