A veces , las tablas HTML contienen celdas vacías. El estilo DOM de celdas vacías se usa para mostrar los bordes y el fondo de las celdas vacías.
Sintaxis:
- Se utiliza para devolver la propiedad celdas vacías.
object.style.emptyCells
- Se utiliza para establecer la propiedad de celdas vacías.
object.style.emptyCells = "show|hide|initial|inherit"
Valor devuelto: una string que representa el borde y el fondo de las celdas vacías.
Valores de propiedad:
- show: Significa que se mostrarán los bordes y el fondo de las celdas vacías. Es el valor predeterminado de esta propiedad.
- ocultar: significa que los bordes y el fondo de las celdas vacías no se mostrarán.
- initial: Hace que la propiedad use su valor predeterminado (es decir, mostrar).
- heredar: Hereda la propiedad de su elemento padre.
Ejemplo-1: El siguiente código muestra cómo establecer la propiedad de celdas vacías entre mostrar y ocultar.
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style emptyCells Property
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>DOM Style emptyCells Property</h2>
<table id="a1" border="1">
<tr>
<th>Student Name</th>
<th>Age</th>
</tr>
<tr>
<td>Manas Chhabra</td>
<td>19</td>
</tr>
<tr>
<td>Hritik Bhatnagar</td>
<td></td>
</tr>
</table>
<br>
<button type="button" onclick="hide()">
Hide empty cells
</button>
<button type="button" onclick="show()">
Show empty cells
</button>
<!-- script to show or hide emptyCell border -->
<script>
function hide() {
document.getElementById("a1").style.emptyCells
= "hide";
}
function show() {
document.getElementById("a1").style.emptyCells
= "show";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón Ocultar:
- Después de hacer clic en el botón Ocultar:
Ejemplo-2: El siguiente código muestra cómo obtener la propiedad celdas vacías.
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style emptyCells Property
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>DOM Style emptyCells Property</h2>
<table id="a1" border="1"
style="empty-cells:hide;">
<tr>
<td></td>
<td>$</td>
</tr>
<tr>
<td>@</td>
<td></td>
</tr>
</table>
<button type="button" onclick="myFunction()">
test
</button>
</center>
<script>
function myFunction() {
console.log(document.getElementById("a1"
).style.emptyCells);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón Prueba:
- Después de hacer clic en el botón Prueba:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style emptyCells se enumeran a continuación:
- Google cromo 1.2
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 4.0
- Apple Safari 1.0
Publicación traducida automáticamente
Artículo escrito por AlieaRizvi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA