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 can I tell if table row is in view using jQuery?
To check if a table row is visible in the viewport or exists on the page, you can use jQuery's is():visible selector. This is useful for determining whether table rows are currently displayed to users −
if($(".row").is(":visible")) {
alert("Row is visible!");
}
The :visible selector matches elements that are visible on the page, meaning they have height and width greater than zero and are not hidden with CSS properties like display: none or visibility: hidden.
Example
You can try to run the following code to learn how to check if a row exists and is visible. The example demonstrates checking row visibility when adding new rows to a table −
<!DOCTYPE html>
<html>
<head>
<title>jQuery - Check Table Row Visibility</title>
<style>
table {
width: 100%;
margin: 25px 0;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #6C220B;
}
table th, table td {
padding: 8px;
text-align: left;
}
form {
margin-bottom: 20px;
}
input {
margin: 5px;
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="text" id="name" placeholder="Enter Name" value="John">
<input type="text" id="subject" placeholder="Enter Subject" value="Mathematics">
<input type="button" class="add-row" value="Click to Add Row">
</form>
<table>
<thead>
<tr>
<th>Choose</th>
<th>Name</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td><input type="checkbox" name="result"></td>
<td>Amit</td>
<td>Java</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$(".add-row").click(function(){
// Check if table rows are visible
if($(".table-row").is(":visible")) {
alert("Visible rows exist! Adding a new row now.");
}
var name = $("#name").val();
var subject = $("#subject").val();
if(name && subject) {
var markup = "<tr class='table-row'><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + subject + "</td></tr>";
$("table tbody").append(markup);
}
});
});
</script>
</body>
</html>
This example demonstrates checking table row visibility before adding new rows, ensuring that visible rows exist in the table and providing user feedback accordingly.
1K+ Views
