Поиск и фильтр по букве\слову

@kikakikol · Регистрация: 19.12.2018

Студворк — интернет-сервис помощи студентам

Добрый вечер
мне нужно было написать скрипт на JS
в поле вводится например буква а
нажимается кнопка
и возвращаются только строки с а

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--кнопка поиск --> 
<table id="tableId">
<tr><td>
        <input type="button" id="search" value="search" onclick="searchName()" /> </td><td>
                 <input id="name" placeholder="Введите имя"/> </td></tr>
 
<div id="table-container" > 
 
<tr align="center"> 
<td>1</td> 
<td>Тирион Ланнистер</td> 
<td>Ланнистеры</td> 
<td>39</td> 
<td>Да</td> 
</tr> 
<tr align="center"> 
<td>2</td> 
<td>Серсея Ланнистер </td> 
<td>Баратеоны</td> 
<td>43</td> 
<td>Да</td> 
</tr> 
<tr align="center"> 
<td>3</td> 
<td>Дейнерис Таргариен</td> 
<td>Таргариены</td> 
<td>22</td> 
<td>Да</td> 
</tr> 
<tr align="center"> 
<td>4</td> 
<td>Джон Сноу</td> 
<td>Таргариены</td> 
<td>23</td> 
<td>Да</td> 
</tr> 
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const searchName = () => { 
let inputText = document.getElementById('name'); 
let table = document.getElementById('tableId'); 
let rows = table.rows.length;
 
for( var i=2; i<rows;i++){ 
var a = String(table.rows[i].cells[1]).indexOf(inputText)
if ( a == -1) {
    {table.rows[i].cells[1].display = "none"} 
}
}
}

выдает ошибку : table.rows[i].cells[1].indexOf is not a function
Помогите доработать код,пожалуйста

@klopp · 19.12.2018, 04:12

1.метод indexOf применяется к строке, а вы его пытаетесь применить к html-элементу
2.в качестве первого аргумента indexOf принимает тоже строку, а у вас что? Опять html-элемент

@amr-now · 19.12.2018, 09:39

Всем здравствуйте!
С исправлением нескольких мелких ошибок в итоге так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <!--кнопка поиск -->
    <table id="tableId">
        <tr>
            <td><input type="button" id="search" value="search"/></td>
            <td><input id="name" placeholder="Введите имя" /></td>
        </tr>
            <tr align="center">
                <td>1</td>
                <td>Тирион Ланнистер</td>
                <td>Ланнистеры</td>
                <td>39</td>
                <td>Да</td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>Серсея Ланнистер </td>
                <td>Баратеоны</td>
                <td>43</td>
                <td>Да</td>
            </tr>
            <tr align="center">
                <td>3</td>
                <td>Дейнерис Таргариен</td>
                <td>Таргариены</td>
                <td>22</td>
                <td>Да</td>
            </tr>
            <tr align="center">
                <td>4</td>
                <td>Джон Сноу</td>
                <td>Таргариены</td>
                <td>23</td>
                <td>Да</td>
            </tr>
    </table>
    <script>
        document.getElementById('search').onclick = searchName;
 
        function searchName() {
            let inputText = document.getElementById('name').value;
            let table = document.getElementById('tableId');
            let rows = table.rows.length;
 
            for (let i = 1; i < rows; i++) {
                let a = table.rows[i].cells[1].textContent.includes(inputText);
                if (a) {
                    table.rows[i].style.display = 'none';
                }
            }
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	19.12.2018, 04:12
	1.метод `indexOf` применяется к строке, а вы его пытаетесь применить к html-элементу 2.в качестве первого аргумента `indexOf` принимает тоже строку, а у вас что? Опять html-элемент 1