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
Apply an IF condition to every element in an HTML table with JavaScript?
HTML tables are created using the <table> tag with <tr> for table rows and <td> for data cells. JavaScript allows you to apply conditional logic to each table element dynamically.
This article demonstrates how to use JavaScript to apply if conditions to every element in an HTML table, enabling dynamic content modification based on specific criteria.
Using document.querySelectorAll() with forEach()
The document.querySelectorAll() method returns a static NodeList of all elements matching the specified CSS selector. Combined with forEach(), it allows you to iterate through table elements and apply conditions.
Syntax
document.querySelectorAll(selector).forEach(function(element) {
if (condition) {
// Apply changes
}
});
Example 1: Changing Table Cell Content
This example demonstrates changing specific table cell values based on their content:
<!DOCTYPE html>
<html>
<head>
<title>Table Conditional Update</title>
<style>
table { border-collapse: collapse; margin: 20px; }
td { border: 1px solid #ddd; padding: 10px; }
</style>
</head>
<body>
<table id="vehicleTable">
<tr>
<td class="vehicle">RX100</td>
<td class="vehicle">BENZ</td>
</tr>
<tr>
<td class="vehicle">BMW</td>
<td class="vehicle">RX100</td>
</tr>
</table>
<script>
document.querySelectorAll(".vehicle").forEach(function(cell) {
if (cell.innerText.trim() === "RX100") {
cell.innerText = "AUDI";
cell.style.backgroundColor = "#ffeb3b";
cell.style.fontWeight = "bold";
}
});
</script>
</body>
</html>
The script finds all elements with class "vehicle" and replaces "RX100" with "AUDI", adding visual styling to highlight the changes.
Example 2: Interactive Table Updates
This example shows how to apply conditions when a user interaction occurs:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Table Update</title>
<style>
table { border-collapse: collapse; margin: 20px; }
td { border: 1px solid #ddd; padding: 10px; }
button { padding: 10px 20px; margin: 20px; }
.updated { background-color: #4caf50; color: white; }
</style>
</head>
<body>
<table id="nameTable">
<tr>
<td class="name">Raj</td>
<td class="name">Maya</td>
</tr>
<tr>
<td class="name">John</td>
<td class="name">Maya</td>
</tr>
</table>
<button onclick="updateNames()">Update Names</button>
<script>
function updateNames() {
document.querySelectorAll(".name").forEach(function(cell) {
if (cell.innerText.trim() === "Maya") {
cell.innerText = "Kamal";
cell.classList.add("updated");
} else if (cell.innerText.trim() === "Raj") {
cell.innerText = "Rajesh";
cell.classList.add("updated");
}
});
}
</script>
</body>
</html>
When the button is clicked, the function applies multiple conditions to update different names and adds a CSS class for visual feedback.
Example 3: Numeric Conditions
This example demonstrates applying numerical conditions to table data:
<!DOCTYPE html>
<html>
<head>
<title>Numeric Conditions</title>
<style>
table { border-collapse: collapse; margin: 20px; }
td { border: 1px solid #ddd; padding: 10px; text-align: center; }
.high { background-color: #f44336; color: white; }
.medium { background-color: #ff9800; color: white; }
.low { background-color: #4caf50; color: white; }
</style>
</head>
<body>
<table>
<tr>
<td class="score">85</td>
<td class="score">42</td>
<td class="score">78</td>
</tr>
<tr>
<td class="score">95</td>
<td class="score">33</td>
<td class="score">67</td>
</tr>
</table>
<button onclick="categorizeScores()">Categorize Scores</button>
<script>
function categorizeScores() {
document.querySelectorAll(".score").forEach(function(cell) {
const score = parseInt(cell.innerText);
if (score >= 80) {
cell.classList.add("high");
cell.title = "High Score";
} else if (score >= 60) {
cell.classList.add("medium");
cell.title = "Medium Score";
} else {
cell.classList.add("low");
cell.title = "Low Score";
}
});
}
</script>
</body>
</html>
This example categorizes numeric scores with different color coding based on value ranges and adds tooltips for additional information.
Key Points
- querySelectorAll() returns a static NodeList that won't change if DOM is modified
- forEach() provides a clean way to iterate through selected elements
- Use trim() to remove whitespace when comparing text content
- Combine conditions with styling changes for better user experience
- Consider performance when working with large tables
Conclusion
Using document.querySelectorAll().forEach() with if conditions provides a powerful way to dynamically modify HTML table elements. This approach enables conditional styling, content updates, and interactive table functionality based on specific criteria.
5K+ Views
