Искать в HTML Таблица тегов

Question

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

У меня есть следующая таблица

<table class="table table-condensed table-bordered table-hover" id="myTable">
    <tr>
        <th>@Id</th>
        <td>Channel:0</td>
    </tr>
    <tr>
        <th>@Name</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>BitCountRange</th>
        <td>14</td>
    </tr>
    <tr>
        <th>PixelType</th>
        <td>Bgr48</td>
    </tr>
    <tr>
        <th>DyeName</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>ShortName</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>ColorMode</th>
        <td>None</td>
    </tr>
</table>

Я хочу найти теги th со следующим скриптом w3 javascript:

<script>
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        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";
                }
            }
        }
    }
</script>

Этот скрипт работает хорошо, если поиск основан на тд тегах. Но я хочу найти заголовок / столбцы таблицы (th).

Я попытался следующие шансы на этот код:

td = tr[i].getElementsByTagName("th")[0];

td = tr[i].getElementsByTagName("th");

Но оба не работает. У меня нет опыта в js, и этот скрипт предназначен для использования в flask.

Answer 1

Вам необходимо заменить tr = table.getElementsByTagName("th"); на tr = document.getElementsByTagName("th");

Я закомментировал неправильный код и использовал правильный код в прикрепленном фрагменте.

<script>
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        //tr = table.getElementsByTagName("tr");
        tr = document.getElementsByTagName("th");
        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";
                }
            }
        }
    }
</script>

Answer 2

Вам нужно только заменить "td" на "th" в коде JS, который будет фильтроваться по тексту в тегах <th>.

Пожалуйста, ознакомьтесь с обновленным кодом.

function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            // td = tr[i].getElementsByTagName("td")[0];
            td = tr[i].getElementsByTagName("th")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table class="table table-condensed table-bordered table-hover" id="myTable">
    <tr>
        <th>@Id</th>
        <td>Channel:0</td>
    </tr>
    <tr>
        <th>@Name</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>BitCountRange</th>
        <td>14</td>
    </tr>
    <tr>
        <th>PixelType</th>
        <td>Bgr48</td>
    </tr>
    <tr>
        <th>DyeName</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>ShortName</th>
        <td>C1</td>
    </tr>
    <tr>
        <th>ColorMode</th>
        <td>None</td>
    </tr>
</table>

Answer 3

Вы можете получить все заголовки таблицы, используя getElementsByTagName и указав th в качестве тега.

<table class="table table-condensed table-bordered table-hover" id="myTable">
        <tr>
            <th>@Id</th>
            <td>Channel:0</td>
        </tr>
        <tr>
            <th>@Name</th>
            <td>C1</td>
        </tr>
        <tr>
            <th>BitCountRange</th>
            <td>14</td>
        </tr>
        <tr>
            <th>PixelType</th>
            <td>Bgr48</td>
        </tr>
        <tr>
            <th>DyeName</th>
            <td>C1</td>
        </tr>
        <tr>
            <th>ShortName</th>
            <td>C1</td>
        </tr>
        <tr>
            <th>ColorMode</th>
            <td>None</td>
        </tr>
    </table>
    <script>
        //get all th's

        var ths = document.getElementsByTagName("th");

        for (let thisTh of ths) {
            console.log(thisTh);
        }
    </script>

При отладке этого кода с помощью f12 в вашем браузере выявляется каждый объект th и свойства, такие как текст в заголовок тега. Просто передайте текст, который вы ищете, в приведенную выше подпрограмму, и когда вы найдете th с соответствующим текстом.

Объект thisTh будет иметь parentNode, как строку таблицы, и одноуровневый элемент, который является тд со значением.