I have a table on a page and I need to search within it i.e., like a filter….when i type within the search it should filter the results from the table
Need JavaScript code for the same as not an expert.
enter code here https://jsfiddle.net/jgdqbxhn/
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}#myInput {
background-image: url("/css/searchicon.png"); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}<p>
<input
id="myInput"
onkeyup="myFunction()"
placeholder="Search for videos.."
type="text"
/>
</p>
<table id="myTable"></table>
<table style="width: 100%; table-layout: fixed">
<tbody>
<tr>
<td
class="mt-bgcolor-dddddd"
rowspan="5"
style="vertical-align: top"
>
<br />
<a
href="/Archive/eLearning_Library"
title="eLearning Library"
><img
alt=""
class="internal default"
height="33px"
src="/@api/deki/files/16797/goBack.png"
style="width: 112px; height: 33px"
width="112px"
/></a>
<p class="mt-align-center"> </p>
<p class="mt-align-center">
<span class="mt-font-arial"
><strong
><img
alt=""
class="internal default"
src="/@api/deki/files/16823/hot-png-46885.png" /></strong
></span>
</p>
<p class="mt-align-center"> </p>
</td>
<td
class="mt-bgcolor-ecf0f1"
colspan="4"
rowspan="1"
style="vertical-align: top"
>
<img
alt=""
class="internal default"
height="63px"
src="/@api/deki/files/16820/eyes.jpg"
style="width: 979px; height: 63px"
width="979px"
/>
</td>
</tr>
<tr>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<strong
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
><img
alt=""
class="internal default"
height="51.9922px"
src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"
style="width: 97.9948px; height: 51.9922px"
width="97.9948px" /></a
></strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><strong
><strong
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
title="Real Time Staging"
>REAL TIME STAGING - NOVEMBER 2021</a
> </strong
></strong
></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<strong
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
><img
alt=""
class="internal default"
height="51.9922px"
src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"
style="width: 97.9948px; height: 51.9922px"
width="97.9948px" /></a
> </strong
>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-arial"
><span class="mt-font-size-14"
><strong
><strong
> <a
href="/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf"
target="_blank"
title="https://documentationcenter.com/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf?origin=mt-web"
>REAL TIME STAGING -
PRESENTATION </a
></strong
></strong
></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
><strong
><img
alt=""
class="internal default"
height="60.9896px"
src="/@api/deki/files/16783/Reinsurance_Capability.png"
style="width: 93.9974px; height: 60.9896px"
width="93.9974px" /></strong
></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
title="Underwriting for New Business"
><strong
>UNDERWRITING FOR NEW BUSINESS - AUGUST
2021</strong
></a
>
</span></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
><strong
><img
alt=""
class="internal default"
height="60.9896px"
src="/@api/deki/files/16783/Reinsurance_Capability.png"
style="width: 93.9974px; height: 60.9896px"
width="93.9974px" /></strong></a
><strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
href="/@api/deki/files/16798/Underwriting_for_New_Business.pdf"
target="_blank"
title="https://documentationcenter.com/@api/deki/files/16798/Underwriting_for_New_Business.pdf?origin=mt-web"
><strong
>UNDERWRITING FOR NEW BUSINESS -
PRESENTATION </strong
></a
></span
></span
>
</p>
</td>
</tr>
<tr>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
><img
alt=""
class="internal default"
height="54.2448px"
src="/@api/deki/files/16806/Data_Transfer_Tool.png"
style="width: 97.9948px; height: 54.2448px"
width="97.9948px"
/></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
title="Data Transfer Tool"
><strong
>DATA TRANSFER TOOL -<br />
MAY 2021</strong
></a
>
<strong><strong> </strong></strong></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
><img
alt=""
class="internal default"
height="54.2448px"
src="/@api/deki/files/16806/Data_Transfer_Tool.png"
style="width: 97.9948px; height: 54.2448px"
width="97.9948px"
/></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
href="/@api/deki/files/16800/Data_Transfer_Tool.pdf"
target="_blank"
title="https://documentationcenter.com/@api/deki/files/16800/Data_Transfer_Tool.pdf?origin=mt-web"
><strong
>DATA TRANSFER TOOL -
PRESENTATION </strong
></a
></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
><img
alt=""
class="internal default"
height="65px"
src="/@api/deki/files/16809/Rider_Management"
style="width: 115px; height: 65px"
width="115px"
/></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
><strong>RIDER MANAGEMENT</strong></a
></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
><img
alt=""
class="internal default"
height="65px"
src="/@api/deki/files/16809/Rider_Management"
style="width: 115px; height: 65px"
width="115px" /></a
><strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
href="/@api/deki/files/16802/Rider_Management"
target="_blank"
title="https://documentationcenter.com/@api/deki/files/16802/Rider_Management?origin=mt-web"
><strong
>RIDER
MANAGEMENT- PRESENTATION </strong
></a
></span
></span
>
</p>
</td>
</tr>
<tr>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
><img
alt=""
class="internal default"
height="54.0625px"
src="/@api/deki/files/16810/PTW.png"
style="width: 100px; height: 54.0625px"
width="100px"
/></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
title="Product Testing Workbench"
><strong
>PRODUCT TESTING WORKBENCH (PTW) - NOVEMBER
2020</strong
></a
>
<strong><strong> </strong></strong></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<a
class="F1"
href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
><img
alt=""
class="internal default"
height="54.0625px"
src="/@api/deki/files/16810/PTW.png"
style="width: 100px; height: 54.0625px"
width="100px"
/></a>
<strong> </strong>
</dt>
</dl>
<p class="mt-align-center">
<span class="mt-font-size-14"
><span class="mt-font-arial"
><a
href="/@api/deki/files/16804/Product_Testing_Workbench.pdf"
target="_blank"
title="https://documentationcenter.com/@api/deki/files/16804/Product_Testing_Workbench.pdf?origin=mt-web"
><strong
>PRODUCT TESTING WORKBENCH (PTW)
- PRESENTATION </strong
></a
></span
></span
>
</p>
</td>
<td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
<dl>
<dt class="mt-align-center">
<img
alt=""
class="internal default"
height="65px"
src="/@api/deki/files/16811/RMD.png"
style="width: 116px; height: 65px"
width="116px"
/>
<strong> </strong>
</dt>
</dl>
</td>
</tr>
</tbody>
</table>Advertisement
Answer
An simple example of filtering using classname filter-items. You may apply the logic in your codes.
function filterItems(e) {
const text = e.target.value.toLowerCase();
const tds = document.querySelectorAll("td");
const items = document.querySelectorAll(".filter-items");
// hide all td
tds.forEach(td => {
td.style.display = "none";
});
// show filtered items
items.forEach(item => {
const word = item.textContent.toLowerCase();
if (word.includes(text)) {
item.closest("td").style.display = "";
}
});
}
document.querySelector("#myInput").addEventListener("keyup", filterItems);<input id="myInput" placeholder="Search for videos.." type="text" />
<table>
<tbody>
<tr>
<td><span class="filter-items">123</span></td>
<td><span class="filter-items">125</span></td>
</tr>
<tr>
<td><span class="filter-items">abc</span></td>
<td><span class="filter-items">abe</span></td>
</tr>
<tr>
<td><span class="filter-items">1AB</span></td>
<td><span class="filter-items">1ac</span></td>
</tr>
</tbody>
</table>