Search in html table javascript tutorial: How to search in multiple tables in a html document. Using JavaScript only. This script looks at what you type in the input field. And if something changes there. Then it calls the search function of the JavaScript.
The search script simply reads every cell of the 2 tables. And if the content doesn’t contain what you typed, it will be made invisible.
When making this invisible, the first row of each table is skipped. (These are the headings, and I want to keep seeing them.)
I thought it would be nice to have a delete button as well. But that gave a problem at first. Namely, the entry field was cleared, but the table did not recover. With the button you can only call up 1 function. But then I thought of it, you can of course call up a second function from that function 😎
Search in html table javascript – test :
Table 001
| Fruit | Color |
|---|---|
| Apple | Green |
| Grapes | Green |
| Orange | Orange |
Table 002
| Vegetable | Color |
|---|---|
| melon | green/red |
| beans | Green/yellow |
| cabbages | green-purple-yellow |
Search in html table javascript – source code
I do not use the CSS code in the example above, because this does not match the layout of my website 🙂 You can see the result in the video. (YouTube) below the article.
Of course, for such a small table this makes little sense. But it is for example applied in my Dutch calorie table of more than 1400 products. And then this is useful. 🙂
<!--
How to search in multiple tables in a html document.
Using Javascript only !!!
The CSS is extra just to make it look better :-)
Copyright (c) Infonosity.net - Bruno Stroobandt.
-->
<html><head>
<style>
#zoekbalk{
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
padding-left: 5px;
margin: 20px;}
#tabel{background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;}
</style>
</head>
<body><center>
<div id="zoekbalk">
Search / zoek : <input id='myInput' onkeyup='searchTable()' type='text'>
<button onclick="CeS()">Clear input field</button><br>
</div>
<div id="tabel">
<br>Table 001<hr>
<table id='myTable1'>
<tr><th>Fruit</th><th>Color</th>
<tr><td>Apple</td><td>Green</td></tr>
<tr><td>Grapes</td><td>Green</td></tr>
<tr><td>Orange</td><td>Orange</td></tr>
</table><hr><br>Table 002<hr>
<table id='myTable2'>
<tr><th>Vegetable</th><th>Color</th>
<tr><td>melon</td><td>green/red</td></tr>
<tr><td>beans</td><td>Green/yellow</td></tr>
<tr><td>cabbages</td><td>green-purple-yellow</td></tr>
</table>
</div>
<script>function CeS(){document.getElementById('myInput').value = '';searchTable();}
function searchTable() {
var input, filter, found, table, tr, td, i, j,tname,k;
for(k=1;k<3;k++){
tname="myTable"+k;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById(tname);
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
if (i>0) { //this skips the headers
tr[i].style.display = "none";
}
}
}}
}
</script></center>
</body></html>On this site you will find more articles about javascript, but also other programming languages. Some with a useful purpose. But also simple games for fun. (Games can also be useful 🙂 and especially if you program them yourself. You are never too old to learn. 😎