#javascript #html
Вопрос:
Я пытаюсь использовать функцию onkeyup для ввода текста и поиска имен пациентов из столбца 2. Но это совершенно не работает и не дает результатов взамен. Я также добавил фрагменты ниже.
Мой столик
<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>
Мое поле ввода
<input type="text" name="search" id="search" placeholder="Search here...." >
Мой 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> Ответ №1:
Там не хватало точки:
tr[i]style.display = "none";
А также этот фрагмент кода был неправильным
let td = tr[i].getElementsByTagName('td')[1].innerText;
if(td){
let textValue = td.textContent || td.innerText;
Чтобы решить эту проблему:
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";
}
}
}
}
Комментарии:
1. Большое спасибо, Мануэльмб. Это действует как заклинание.
Ответ №2:
У вас только что была пара опечаток. tr[i]style.display отсутствует период между tr[i] и style.display , и вы устанавливали td innerText значение в ячейке таблицы, что приводит к строке — затем вы попытались получить доступ textContent или innerText из этой строки (поэтому удаление первоначального вызова innerText исправляет это.
Я настоятельно рекомендую вам использовать современную среду разработки, такую как Visual Studio Code, которая автоматически помечает эти типы проблем. Кроме того, просмотр кода в отладчике браузера также, скорее всего, покажет вам, где возникают проблемы.
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> Комментарии:
1. Спасибо, Бобтемагикмуз. Я обязательно прослежу за тем, что вы сказали, в следующий раз, когда сделаю это.
Ответ №3:
Вы можете сделать это проще, используя table.rows, как это:
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 = "";
}
};