I'm trying to use onkeyup function for a text input and search for Patient Names from column 2. But it it doesn't work at all and doesn't give results in return. I've also added the snippets below.
My table
<table id="table" width="100%">
<tbody>
<tr class="table-heading">
<td>
<div>
<p>ID</p>
</div>
</td>
<td>
<div>
<p>Patient name</p>
</div>
</td>
<td>
<div>
<p>NIC</p>
</div>
</td>
<td>
<div>
<p>Date of Birth</p>
</div>
</td>
<td>
<div>
<p>Address.</p>
</div>
</td>
<td>
<div>
<p>Username</p>
</div>
</td>
<td>
<div>
<p>Status</p>
</div>
</td>
</tr>
<div class="grid">
<tr>
<td>
<div>
<p>1</p>
</div>
</td>
<td>
<div>
<p>Kumar K</p>
</div>
</td>
<td>
<div>
<p>654561</p>
</div>
</td>
<td>
<div>
<p>1995-05-21</p>
</div>
</td>
<td>
<div>
<p>the avenue</p>
</div>
</td>
<td>
<div>
<p>random</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>2</p>
</div>
</td>
<td>
<div>
<p>Ravi R</p>
</div>
</td>
<td>
<div>
<p>98741262</p>
</div>
</td>
<td>
<div>
<p>1996-05-22</p>
</div>
</td>
<td>
<div>
<p>the street</p>
</div>
</td>
<td>
<div>
<p>real</p>
</div>
</td>
<td>
<div>
<p>inactive</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>3</p>
</div>
</td>
<td>
<div>
<p>Sanjay U</p>
</div>
</td>
<td>
<div>
<p>575305</p>
</div>
</td>
<td>
<div>
<p>1993-05-28</p>
</div>
</td>
<td>
<div>
<p>the house</p>
</div>
</td>
<td>
<div>
<p>normal</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
</div>
</tbody>
My input box
<input type="text" name="search" id="search" placeholder="Search here...." >
My JavaScript
document.getElementById("search").onkeyup = function() {
let filter = document.getElementById('search').value.toUpperCase();
let table = document.getElementById('table');
let tr = table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i ){
let td = tr[i].getElementsByTagName('td')[1].innerText;
if(td){
let textValue = td.textContent || td.innerText;
if(textValue.toUpperCase().indexOf(filter) > -1){
tr[i].style.display = "";
}
else{
tr[i]style.display = "none";
}
}
}
}
document.getElementById("search").onkeyup = function() {
let filter = document.getElementById('search').value.toUpperCase();
let table = document.getElementById('table');
let tr = table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i ){
let td = tr[i].getElementsByTagName('td')[1].innerText;
if(td){
let textValue = td.textContent || td.innerText;
if(textValue.toUpperCase().indexOf(filter) > -1){
tr[i].style.display = "";
}
else{
tr[i]style.display = "none";
}
}
}
}<input type="text" name="search" id="search" placeholder="Search here...." >
<table id="table" width="100%">
<tbody>
<tr class="table-heading">
<td>
<div>
<p>ID</p>
</div>
</td>
<td>
<div>
<p>Patient name</p>
</div>
</td>
<td>
<div>
<p>NIC</p>
</div>
</td>
<td>
<div>
<p>Date of Birth</p>
</div>
</td>
<td>
<div>
<p>Address.</p>
</div>
</td>
<td>
<div>
<p>Username</p>
</div>
</td>
<td>
<div>
<p>Status</p>
</div>
</td>
</tr>
<div class="grid">
<tr>
<td>
<div>
<p>1</p>
</div>
</td>
<td>
<div>
<p>Kumar K</p>
</div>
</td>
<td>
<div>
<p>654561</p>
</div>
</td>
<td>
<div>
<p>1995-05-21</p>
</div>
</td>
<td>
<div>
<p>the avenue</p>
</div>
</td>
<td>
<div>
<p>random</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>2</p>
</div>
</td>
<td>
<div>
<p>Ravi R</p>
</div>
</td>
<td>
<div>
<p>98741262</p>
</div>
</td>
<td>
<div>
<p>1996-05-22</p>
</div>
</td>
<td>
<div>
<p>the street</p>
</div>
</td>
<td>
<div>
<p>real</p>
</div>
</td>
<td>
<div>
<p>inactive</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>3</p>
</div>
</td>
<td>
<div>
<p>Sanjay U</p>
</div>
</td>
<td>
<div>
<p>575305</p>
</div>
</td>
<td>
<div>
<p>1993-05-28</p>
</div>
</td>
<td>
<div>
<p>the house</p>
</div>
</td>
<td>
<div>
<p>normal</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
</div>
</tbody>
</table>CodePudding user response：
There was a missing dot:
tr[i]style.display = "none";
And also this piece of code was not right
let td = tr[i].getElementsByTagName('td')[1].innerText;
if(td){
let textValue = td.textContent || td.innerText;
To solve it:
document.getElementById("search").onkeyup = function() {
let filter = document.getElementById('search').value.toUpperCase();
let table = document.getElementById('table');
let tr = table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i ){
let textValue = tr[i].getElementsByTagName('td')[1].innerText;
if(textValue){
if(textValue.toUpperCase().indexOf(filter) > -1){
tr[i].style.display = "";
}
else{
tr[i].style.display = "none";
}
}
}
}
CodePudding user response：
You just had a couple typos. tr[i]style.display is missing a period between tr[i] and style.display and you were setting td to innerText of the table cell which results in a string - you then tried to access textContent or innerText from that string (so removing the initial call to innerText fixes it.
I highly recommend you use a modern IDE such as Visual Studio Code which will automatically flag these types of issues. Also, stepping through the code in a browser debugger will also likely show you where issues arise.
document.getElementById("search").onkeyup = function() {
let filter = document.getElementById('search').value.toUpperCase();
let table = document.getElementById('table');
let tr = table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i ){
let td = tr[i].getElementsByTagName('td')[1];
if(td){
let textValue = td.textContent || td.innerText;
if(textValue.toUpperCase().indexOf(filter) > -1){
tr[i].style.display = "";
}
else{
tr[i].style.display = "none";
}
}
}
}<input type="text" name="search" id="search" placeholder="Search here...." >
<table id="table" width="100%">
<tbody>
<tr class="table-heading">
<td>
<div>
<p>ID</p>
</div>
</td>
<td>
<div>
<p>Patient name</p>
</div>
</td>
<td>
<div>
<p>NIC</p>
</div>
</td>
<td>
<div>
<p>Date of Birth</p>
</div>
</td>
<td>
<div>
<p>Address.</p>
</div>
</td>
<td>
<div>
<p>Username</p>
</div>
</td>
<td>
<div>
<p>Status</p>
</div>
</td>
</tr>
<div class="grid">
<tr>
<td>
<div>
<p>1</p>
</div>
</td>
<td>
<div>
<p>Kumar K</p>
</div>
</td>
<td>
<div>
<p>654561</p>
</div>
</td>
<td>
<div>
<p>1995-05-21</p>
</div>
</td>
<td>
<div>
<p>the avenue</p>
</div>
</td>
<td>
<div>
<p>random</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>2</p>
</div>
</td>
<td>
<div>
<p>Ravi R</p>
</div>
</td>
<td>
<div>
<p>98741262</p>
</div>
</td>
<td>
<div>
<p>1996-05-22</p>
</div>
</td>
<td>
<div>
<p>the street</p>
</div>
</td>
<td>
<div>
<p>real</p>
</div>
</td>
<td>
<div>
<p>inactive</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>3</p>
</div>
</td>
<td>
<div>
<p>Sanjay U</p>
</div>
</td>
<td>
<div>
<p>575305</p>
</div>
</td>
<td>
<div>
<p>1993-05-28</p>
</div>
</td>
<td>
<div>
<p>the house</p>
</div>
</td>
<td>
<div>
<p>normal</p>
</div>
</td>
<td>
<div>
<p>active</p>
</div>
</td>
</tr>
</div>
</tbody>
</table>CodePudding user response：
You can do it simpler using table.rows like this:
document.getElementById("search").onkeyup = function () {
let filter = document.getElementById("search").value.toUpperCase();
let table = document.getElementById("table");
for (var i = 0, row; (row = table.rows[i]); i ) {
if (!row.cells[1].innerHTML.toUpperCase().includes(filter))
row.style.display = "none";
else row.style.display = "";
}
};