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
Apply an IF condition to every element in an HTML table with JavaScript?
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. Let’s dive into the article to learn more about applying an if condition to every element in an HTML table.
Applying if condition to every element in an HTML table
If a certain condition is true, the if/else statement causes a block of code to be executed. Another block of code can be run if the condition is false. The "Conditional" Statements in JavaScript, which are used to carry out various operations depending on various conditions, include the "if/else" statement.
For applying if condition to every element in an HTML table we are going to use document.querySelectorAll.forEach().
Using document.querySelectorAll.forEach()
A static (not live) NodeList providing a list of the document's elements that match the given collection of selectors is returned by the Document function querySelectorAll().
Syntax
Following is the syntax for document.querySelectorAll.forEach().
querySelectorAll(selectors)
For a better understanding of applying an if condition to every element in an HTML table, let’s look into the following examples.
Example
In the following example, we are running the script and changing the value of elements in an HTML table by applying the if condition.
<!DOCTYPE html>
<html>
<body style="background-color:#9FE2BF">
<table>
<tr>
<td class="tutorial">RX100</td>
</tr>
<tr>
<td class="tutorial">BENZ</td>
</tr>
</table>
<script>
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "RX100") {
item.innerText = "AUDI";
}
});
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of the value displayed on the webpage obtained by changing the element value by applying the if condition and changing the value to "AUDI."
Example
Considering the following example, where we are running the script using the if condition and changing the value of an element in an HTML table.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<table>
<tr>
<td class="tutorial">Raj</td>
</tr>
<tr>
<td class="tutorial">Maya</td>
</tr>
</table>
<button onclick=changevalue()>Click To Change</button>
<script>
function changevalue(){
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "Maya") {
item.innerText = "Kamal";
}
});
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the elements along with a button for the webpage. If the user clicks the button, the event gets triggered, changes the element value, and displays it on the webpage.
4K+ Views
