Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to know whether the border and background of empty cells are hidden or not with JavaScript?
In this tutorial, we will learn how to detect whether empty table cells have hidden borders and backgrounds using JavaScript. This is useful when working with dynamic tables where some cells may be empty.
The emptyCells CSS property controls whether borders and backgrounds are displayed for empty table cells. JavaScript provides methods to check and modify this behavior programmatically.
Understanding Empty Cells
Empty table cells can either show their borders and backgrounds or hide them completely. The empty-cells CSS property has two values:
-
show- Display borders and backgrounds for empty cells (default) -
hide- Hide borders and backgrounds for empty cells
Using the emptyCells Property
The emptyCells property in JavaScript allows you to check or set whether empty table cells should display their borders and backgrounds.
Syntax
// Check current value let cellsStatus = element.style.emptyCells; // Set empty cells to hide element.style.emptyCells = "hide"; // Set empty cells to show element.style.emptyCells = "show";
Example
This example creates a table with empty cells and demonstrates how to check and toggle their visibility:
<html>
<head>
<style>
table, td {
border: 2px solid black;
}
#mytableID {
width: 100%;
}
</style>
</head>
<body>
<h2>Check Empty Cells Visibility</h2>
<table id="mytableID" style="empty-cells:hide">
<tr>
<td><b>Serial No.</b></td>
<td><b>Luxury Cars</b></td>
</tr>
<tr>
<td>1.</td>
<td>Volvo XC90</td>
</tr>
<tr>
<td>2.</td>
<td>Rolls Royce Phantom</td>
</tr>
<tr>
<td>3.</td>
<td>BMW X6</td>
</tr>
<tr>
<td>4.</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Audi RS7</td>
</tr>
</table>
<br>
<button type="button" onclick="checkCells()">Check Status</button>
<button type="button" onclick="showCells()">Show Hidden Cells</button>
<p id="result">Result will appear here</p>
<script>
function checkCells() {
let table = document.getElementById("mytableID");
let status = table.style.emptyCells;
if (status === "hide") {
document.getElementById("result").innerHTML = "Empty cells are hidden";
} else {
document.getElementById("result").innerHTML = "Empty cells are visible";
}
}
function showCells() {
document.getElementById("mytableID").style.emptyCells = "show";
document.getElementById("result").innerHTML = "Empty cells are now visible";
}
</script>
</body>
</html>
Using JavaScript to Detect Empty Cells
You can also programmatically find empty cells and determine their visibility status:
<html>
<head>
<style>
table, td {
border: 2px solid black;
}
#sportsTable {
width: 100%;
empty-cells: hide;
}
</style>
</head>
<body>
<h2>Detect Empty Cells</h2>
<table id="sportsTable">
<tr>
<td><b>Serial No.</b></td>
<td><b>Sports Bikes</b></td>
</tr>
<tr>
<td>1.</td>
<td>Yamaha R15S</td>
</tr>
<tr>
<td></td>
<td>TVS Apache RR 310</td>
</tr>
<tr>
<td>3.</td>
<td>Bajaj Pulsar NS200</td>
</tr>
<tr>
<td>4.</td>
<td></td>
</tr>
<tr>
<td>5.</td>
<td>KTM RC 390</td>
</tr>
</table>
<br>
<button type="button" onclick="analyzeTable()">Analyze Table</button>
<p id="analysis"></p>
<script>
function analyzeTable() {
let table = document.getElementById("sportsTable");
let cells = table.getElementsByTagName("td");
let emptyCells = 0;
let emptyCellsStatus = window.getComputedStyle(table).emptyCells;
for (let i = 0; i < cells.length; i++) {
if (cells[i].innerHTML.trim() === "") {
emptyCells++;
}
}
document.getElementById("analysis").innerHTML =
`Found ${emptyCells} empty cells. Empty cells are ${emptyCellsStatus}.`;
}
</script>
</body>
</html>
Key Methods
| Method | Purpose | Usage |
|---|---|---|
element.style.emptyCells |
Get/set inline empty-cells property | Direct style manipulation |
getComputedStyle(element).emptyCells |
Get computed empty-cells value | Reading CSS values |
cell.innerHTML.trim() === "" |
Check if cell is empty | Detecting empty cells |
Conclusion
The emptyCells property provides a simple way to control and detect the visibility of empty table cells. Use getComputedStyle() for accurate detection and style.emptyCells for dynamic changes.
295 Views
