How to Create a Find and Replace Cell Value Functionality for an HTML Table using JavaScript
In this Javascript tutorial, we will learn how to implement a Find and Replace functionality for an HTML table cells using JavaScript.
This feature can be useful when you have a large table and need to quickly search for specific text and replace it with another value.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Find And Replace</title>
<style>
body{ font-family: sans-serif; }
.form-container{ display: flex; flex-direction: row;
align-items: center; justify-content: center;
margin-top: 50px; margin-bottom: 20px;
}
.form-container input[type="text"]{ width: 200px; padding: 10px;
margin-right: 10px; border:none;
border-radius: 5px; color: #333;
font-size: 16px; box-shadow: 0 0 5px #ccc;
}
.form-container button{ padding: 10px 20px; border: none;
border-radius: 5px; background-color: #26ff;
color: #fff; font-size: 16px; cursor: pointer;
}
#table-search{ border-collapse: collapse; width: 100%; max-width: 800px;
margin: 0 auto; font-size: 16px; color: #333; }
#table-search th{ background-color: #555; color:#fff; text-align: center;
padding: 10px; border-bottom: 2px solid #ddd; }
#table-search td{ padding: 10px; border-bottom: 1px solid #ccc; }
</style>
</head>
<body>
<div class="form-container">
<input type="text" id="find-input" placeholder="Find">
<input type="text" id="replace-input" placeholder="Replace">
<button id="replace-button">Find and Replace</button>
</div>
<table id="table-search">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>28</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Michael</td>
<td>42</td>
<td>New York</td>
</tr>
<tr>
<td>Emily</td>
<td>35</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>Chicago</td>
</tr>
<tr>
<td>David</td>
<td>19</td>
<td>Miami</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Anna</td>
<td>56</td>
<td>Chicago</td>
</tr>
<tr>
<td>Mark</td>
<td>40</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<script>
/*
This function finds and replaces the given text in the HTML table.
It retrieves the values for "find" and "replace" from input fields with ids
"findInput" and "replaceInput".
It then retrieves all the td elements in the table using the "myTable" id
and loops through each cell.
If the innerHTML of the cell contains the "find" text,
it replaces all occurrences of that text with the "replace" text.
The function use the the replace() method and RegExp.
*/
document.getElementById("replace-button").
addEventListener("click", findAndReplace);
function findAndReplace()
{
var find = document.getElementById("find-input").value;
var replace = document.getElementById("replace-input").value;
var table = document.getElementById("table-search");
var cells = table.getElementsByTagName("td");
console.log(find);
console.log(replace);
for(var i = 0; i < cells.length; i++)
{
if(cells[i].innerHTML.indexOf(find) !== -1)
{
cells[i].innerHTML =
cells[i].innerHTML.
replace(new RegExp(find,"g"), replace);
}
}
}
</script>
</body>
</html>
Code Explanation:
JavaScript Function:
The JavaScript function handles the Find and Replace functionality. When the "Find and Replace" button is clicked, it triggers the findAndReplace function. This function retrieves the values entered in the "Find" and "Replace" input fields and stores them in variables.
Next, it accesses the HTML table by its id and retrieves all td elements within it using getElementsByTagName("td"). It then iterates over each cell using a for loop.
Within the loop, it checks if the innerHTML of the cell contains the "find" text by using the indexOf method. If a match is found (i.e., the index is not -1), it replaces all occurrences of the "find" text with the "replace" text using the replace method and a regular expression with the "g" flag (global replace).
OUTPUT:
