jQuery empty Selector Examples
Ever wondered how to use the jQuery empty selector? In this article, I am going to share different ways of using the empty selector in jQuery along with easy to follow examples. Read on to find out more.
How to use jQuery empty selector
Let’s assume that we have different html elements on the web page. such as Table. What essentially the :empty selector does is that it select all elements that have no children (including text nodes). So let’s see how to use :empty:
Example 1: Use :empty on Table to alert /get all empty cells of the table
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<style type="text/css"> table td { border: 1px solid #CCC; } .cell_class { background-color: #D0F5FF; border: 1px solid #06F; } </style> <table width="50%" border="1" cellspacing="1" cellpadding="1" id="table1"> <tr> <td>R1C1</td> <td></td> <td>R1C3</td> </tr> <tr> <td></td> <td>R2C2</td> <td></td> </tr> <tr> <td></td> <td></td> <td>R3C3</td> </tr> </table> <p> <input type="submit" name="sbt_get_all_empty_cells" id="sbt_get_all_empty_cells" value="Get all Empty Cells of Table"> </p> $('#sbt_get_all_empty_cells').on("click", function(e){ $('#table1 td:empty').each(function(index) { var row_index = $(this).parent().index('tr'); var col_index = $(this).index('tr:eq('+row_index+') td'); alert('Row Number # '+(row_index + 1)+' Column Number # '+(col_index + 1) + ' is Empty!'); }); e.preventDefault(); }); |
When you run the above code, simply click the “Get all Empty Cells of Table” button and that will alert all the empty cell Row & Column numbers. You can apply whatever manipulations you want by using them.
Example 2: Use :empty on Table to Write Custom Data To Empty Cells
There are different parts in this example, so let’s take a look at each of these parts separately. The following is the common HTML source for all these parts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style type="text/css"> table td { border: 1px solid #CCC; } .cell_class { background-color: #D0F5FF; border: 1px solid #06F; } </style> <table width="50%" border="1" cellspacing="1" cellpadding="1" id="table2"> <tr> <td>R1C1</td> <td></td> <td>R1C3</td> </tr> <tr> <td></td> <td>R2C2</td> <td></td> </tr> <tr> <td></td> <td></td> <td>R3C3</td> </tr> </table> <p> <input type="submit" name="sbt_write_to_empty_cells" id="sbt_write_to_empty_cells" value="Write to all Empty Cells of Table 2"> <input type="submit" name="sbt_revert_to_empty_cells" id="sbt_revert_to_empty_cells" value="Revert To Empty Cells of Table 2"> </p> <p> <input type="submit" name="sbt_add_class_to_empty_cells" id="sbt_add_class_to_empty_cells" value="Add Class To Empty Cells of Table 2"> <input type="submit" name="sbt_remove_class_from_empty_cells" id="sbt_remove_class_from_empty_cells" value="Remove Class From Empty Cells of Table 2"></p> |
Part 1: Write to all Empty Cells of the Table
|
1 2 3 4 5 6 7 |
$('#sbt_write_to_empty_cells').on("click", function(e){ $('#table2 td:empty').text("Cell is Empty!"); e.preventDefault(); }); |
When you click the button, all empty cells of the table will be filled with the custom text (Cell is Empty!).
Part 2: Revert all / Make Table Cells by removing the custom text that you filled them with
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('#sbt_revert_to_empty_cells').on("click", function(e){ $('#table2 td').each(function(index) { if( 'Cell is Empty!' == $(this).text() ) { $(this).text(''); } }); e.preventDefault(); }); |
Part 3: Add Custom Class to the Empty Cells of the Table
|
1 2 3 4 5 6 7 |
$('#sbt_add_class_to_empty_cells').on("click", function(e){ $('#table2 td:empty').addClass('cell_class'); e.preventDefault(); }); |
Add a class or multiple class of your choice to empty table cells by clicking the button.
Part 4: Remove Custom Class that you applied to the Empty Cells of the Table
|
1 2 3 4 5 6 7 |
$('#sbt_remove_class_from_empty_cells').on("click", function(e){ $('#table2 td:empty').removeClass('cell_class'); e.preventDefault(); }); |
Click on the button to remove the class that you applied to the empty table cells.
That’s it!
Do you know of any other ways to use jQuery empty selector? Feel free to suggest by commenting below.
j Like This Article? Spread The Word!
a You May Also Like
jQuery Change Select Options Examples
K Continue Reading E Preview w Try Demo
jQuery Change Select Options Examples
Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can change or refresh the options of a select list using jQuery. How To …
w Try Demo K Continue Reading
jQuery Find Value In Array Examples
K Continue Reading E Preview w Try Demo
jQuery Find Value In Array Examples
Talking about arrays in jQuery, it can be really helpful to know if a value exists in an array or not. That said, in this article, I am going to share examples on how to find if a specific value exists in an array or not using jQuery. Try the demo to see how it works in real time. How To Find If A Value Exists In Array Or Not Using jQuery Let's assume that we have an array of fruits. Now we would like to search …
w Try Demo K Continue Reading-
JavaScript: Count Occurrences Of String In String Examples
K Continue Reading E Preview w Try Demo
JavaScript: Count Occurrences Of String In String Examples
At some point or the other, it might be useful to count the number of occurrences of a specific word or a string in another string using JavaScript. In this article, I am going to share very easy example to do just that with the help of easy to follow examples. Read on to find out more. How To Count Occurrences In String Using JavaScript Let's look at how to do this with an example. Consider that we have a string that says: "This is a string.". Now …
w Try Demo K Continue Reading
m Never Miss A Post
Sign up for Newsletter
from Extreme Web Designs
We will send you FREE periodical updates whenever we publish a new article so that you can remain on top of technology. We will NEVER send unsolicited email. That’s our GUARANTEE !!!
f About Author: Rocky Dev
