Hay dos enfoques que pueden ayudar a ocultar un encabezado de tabla con la ayuda de JavaScript. Se discuten a continuación:
Enfoque 1: seleccione el encabezado con un selector de CSS y modifique la propiedad de estilo de modo que el valor de la propiedad de visualización se establezca en none . Esto ocultará el elemento de encabezado de tabla seleccionado de la página.
Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to hide the table
header using JavaScript
</title>
<style>
table {
margin-left: 180px;
}
td {
padding: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol"
span="2">
<col>
</colgroup>
<tr id="thead">
<th>S.No</th>
<th>Title</th>
</tr>
<tr>
<td>Geek_1</td>
<td>GeekForGeeks</td>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN">
</p>
<script>
var el_down =
document.getElementById("GFG_DOWN");
function Geeks() {
var tb
= document.getElementById("thead");
tb.style.display = "none";
el_down.innerHTML =
"Table header is hidden";
}
</script>
</body>
</html>
Producción:
Enfoque 2: use jQuery para seleccionar el encabezado que se ocultará y use el método hide() en él. Este método jQuery ayuda a ocultar el elemento en el que se utiliza.
Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to hide the table
header using JavaScript
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
table {
margin-left: 180px;
}
td {
padding: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol"
span="2">
<col>
</colgroup>
<tr id="thead">
<th>S.No</th>
<th>Title</th>
</tr>
<tr>
<td>Geek_1</td>
<td>GeekForGeeks</td>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN">
</p>
<script>
var el_down =
document.getElementById("GFG_DOWN");
function Geeks() {
$("#thead").hide();
el_down.innerHTML =
"Table header is hidden";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA