Я пытаюсь использовать функцию 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
learning Gatherer 9 Окт 2021 в 12:24

3 ответа

Лучший ответ

Отсутствовала точка:

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";
            }
        }
    }
}
0
ManuelMB 9 Окт 2021 в 09:38

Вы только что допустили пару опечаток. tr[i]style.display отсутствует точка между tr[i] и style.display, и вы устанавливали td на innerText ячейки таблицы, в результате чего получилась строка - затем вы попытались доступ к textContent или innerText из этой строки (поэтому удаление начального вызова innerText исправляет его.

Я настоятельно рекомендую вам использовать современную среду IDE, такую ​​как 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>
0
BobtheMagicMoose 9 Окт 2021 в 09:40

Вы можете сделать это проще, используя 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 = "";
  }
};
0
Gabriel 9 Окт 2021 в 09:40