Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 know whether the border and background of empty cells are hidden or not with JavaScript.
The JavaScript programming language can be used to create and modify DOM elements. There are two ways to incorporate HTML elements like tables into an HTML document. The first involves adding the HTML table tag straight to our HTML webpage, while the second involves writing the entire table as JavaScript code. The second approach is the most frequently used to create and include tables in the DOM.
The tr abbreviation indicates the table row. This represents the full table row. We must create a row and then use the <td> tag to insert the data within that row into the table, either inside the table's heading, body, or footer. The acronym <td> refers to Table data. It represents the table's single cell.
Following are the methods to know whether the border and background of empty cells are hidden or not using JavaScript.
The emptyCells property method
The empty-cells property specifies whether or not empty cells in a table should have borders and backgrounds (only for the "separated borders" model).
The emptyCells property in JavaScript selects empty table cells to specify whether or not they should have borders and backgrounds. In other words, it instructs the browser whether or not to draw borders around table cells or fill in the background when they are empty. It's similar to setting the visibility property on empty table cells.
A good use case for empty cells is when you are unsure whether a table will contain empty data points and decide to hide them. Tables were once the unofficial way to build webpage layouts, so it is useful tool for showing and hiding elements. When tables are used for appearance or where elements have the display property.
Syntax
document.getElementById("mytableID").style.emptyCells = "hide";
The table ID is fetched using the getElementbyId() method, and the empty cells are set to hide property.
Example
In this example, we created a table of 2 px border, which is a solid black color. The table has Serial No. and Luxury Cars as headings. The width of the table contents is 100%. The luxury cars are Volvo XC90, Rolls Royce Phantom, BMW X6, and Audi RS7. The cell at the 4th serial number is empty. The 5th serial number cell is empty too. Using the emptyCells property, we can see that the background and border of the cells are hidden.
<html> <head> <style> table, td { border: 2px solid black; } #mytableID { width: 100%; } </style> </head> <body> <h2> Check whether the border and background of empty cells are hidden or not using <i> emptyCells property </i> </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> </body> <br> <button type = "button" onclick = "myFunction()"> Check </button> <button type = "button" onclick = "show()"> show hidden cells </button> <p id = "root">Result Here</p> <script> function myFunction() { if (document.getElementById("mytableID").style.emptyCells == "hide"){ document.getElementById("root").innerHTML = "Hidden"; }else{ document.getElementById("root").innerHTML = "No cell Hidden"; } } function show() { document.getElementById("mytableID").style.emptyCells = "show"; } </script> </html>
The jQuery hide cells method
The external library jQuery is a fast, compact, and feature-rich JavaScript library. It simplifies HTML document navigation and manipulation, event handling, animation, and Ajax by providing an easy-to-use API that works across many browsers. Due to its flexibility and extensibility, jQuery has changed how millions of people write JavaScript.
To hide the selected elements, use the jQuery hide() method. This corresponds to the CSS property display: none. Hidden elements will not be shown at all (no longer affecting the page's layout). Use the show() method to reveal hidden elements.
Syntax
$(this).hide();
The empty table cells are selected using the $(this) function and are set to hide the property.
Example
In this example, we've made a table with a 2 px border and a solid black border color. The table's headings are Serial No. and Sports Bikes. The table contents span the entire width of the page. Yamaha R15S, TVS Apache RR 310, Bajaj Pulsar NS200, and KTM RC 390 are sports bikes. The fourth sports bike cell is empty. The second serial number cell is also empty. We can see that the background and border of the cells are hidden by using the .hide() property of jQuery. The cells are shifted to the left to save space.
<html> <head> <style> table, td { border: 2px solid black; } #mytableID { width: 100%; } table { empty-cells: hide; } </style> </head> <body> <p> Check whether the border and background of empty cells are hidden or not using <i> JQuery hide </i> property </p> <table id = "mytableID" style = "empty-cells:hide;"> <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> </body> <br> <button type = "button" onclick = "myFunction()"> Check </button> <p id = "root"></p> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> function myFunction() { var td1 = $('td').each(function(){ if ($(this).html() == '') { //$(this).hide(); document.getElementById('root').innerHTML = "Border and background of Empty Cells are hidden" } }); } </script> </html>
In this tutorial, we discussed two methods to know whether the border and background of the empty cells are hidden or not. The first method is using the Style emptyCells property and the second is using the jQuery hide() method.
80 Views
