如何使用 Javascript 隐藏表头答案

【问题标题】：How to hide a Table Header using Javascript如何使用 Javascript 隐藏表头
【发布时间】：2013-04-16 07:58:22
【问题描述】：

如何在 javascript 中隐藏表格标题。

详细我使用的是easyui-datagrid，我必须在其中隐藏列标题。

请指导我解决这个问题。

提前致谢。

【问题讨论】：

【解决方案1】：

如果您在没有任何框架（如 jQuery 等）帮助的情况下使用纯 JavaScript，您应该为您的表格提供一个 id 并将表格对象分配给一个变量：

var tb = document.getElementById("your-table-id");

然后在表格内找到“thead”标签并隐藏，如下：

tb.getElementsByTagName("thead")[0].style.display = "none";

注意 getElementsByTagName 返回一个 html 元素数组，因为一个有效的表格可以有 0 或 1 个“头”出现，如果你确定你的表格有标题，你可以安全地访问第一个元素并改变它的可见性。

【讨论】：

【解决方案2】：

如果你真的需要使用 JavaScript，那么你应该可以使用标准选择器和 jQuery 并使用 Hide 方法：

$("#id or .class of header row").hide();

但我建议改用 CSS：

#id or .class of header row {
    display: none;
}

使用 CSS 路由影响较小，所有 jQuery 都会将相同的样式直接应用于元素。

【讨论】：

【解决方案3】：

我用这段代码做到了：

 $('#my-ddata-grid').datagrid({
 ....
 ....
 });

jQuery('.datagrid-header-inner').hide();

您还可以删除其他元素，例如这样的分页栏：

jQuery('.datagrid-pager.pagination').remove();

【讨论】：

【解决方案4】：

以下代码对我有用：

<style>
.datagrid-header-row {
    visibility: collapse;
}
</style>

【讨论】：