Как найти элемент tr, содержащий элементы td с текстом из выпадающих списков?

@skv1991 · Регистрация: 14.05.2012

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

Добрый вечер уважаемые товарищи программисты и форумчане.

Вопрос: Как определить ряд(tr) в таблице, в который входят несколько элементов(td), содержащие текст, такой же как и в выпадающих меню(select).

Задача: Мне необходимо сделать так, что при выборе из 2х(затем сделаю 4х) выпадающих меню конкретных пунктов, и нажатии кнопки, будет производиться поиск по таблице, необходимо найти ряд(tr), в котором есть ячейки, содержащие такой же текст как и выбранный в выпадающих меню.

Пример:

Как найти элемент tr, содержащий элементы td с текстом из выпадающих списков?

В выпадающих меню(select) выбраны пункты, в первом: яблоко; Во втором: груша.
Что должно выдать: Элемент(ы) содержащий(е) оба этих слова, то есть в условии логическое "И".
В данном случае это будет ряд "один" и ряд "шесть".

Цель: В последствии подсветить эти ряды(tr) через css, добавлением рамки/фона.

Дополнительная информация:
ID таблицы: table1
ID select'а 1: properties
ID select'а 2: properties2
ID кнопки: confirm
В таблице у элементов tr нет идентификатора и класса.
Поиск должен идти со второго элемента таблицы, первый с информацией, тут можно использовать :gt(0) в селекторе.

Наработки:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){   
 
    $("#confirm").click(function(){ 
        var property1 = $("#properties option:selected").text();
        var property2 = $("#properties2 option:selected").text();
        var searchrow = $("#table1 tr:gt(0)");
 
        for (var i=0; i<$(searchrow).length; i=i+1){
            var rowproperty1 = $(searchrow).eq(i).has('td:contains('+property1+')');
            var rowproperty2 = $(searchrow).eq(i).has('td:contains('+property2+')');
 
            if ( $(rowproperty1)==$(rowproperty2) )
            {
                alert("Found!");
                $(rowproperty1).closest('tr').css("background","red");
            };
 
        };
    });
 
});

Но у меня что-то не то получается. Подскажите что не так, и как использовать поиск по таблице и как то объединить условия через логическое "И". Как вообще реализовать задачу. Никак не могу придумать, уже и двухмерные массивы в голову лезут и матрицы, но это что-то не то. Спасибо.

@skv1991 · 17.05.2012, 00:52 **[ТС]**

Это так сложно реализовать?

@suharik · 17.05.2012, 10:10

Вечерком отпишу

@skv1991 · 17.05.2012, 12:06 **[ТС]**

Код кнопок:

HTML5
1
<button id="confirm">Поехали!</button><button id="reset">Сброс</button>

Ещё один параметр:

HTML5
1
2
3
4
5
Содержит свойства:
<select id="booltype">
<option>ИЛИ</option>
<option>И</option>
</select>

Т.е. когда я выбираю "И", поиск должен проводиться как раз по рядам и искать ряд с несколькими вхождениями из выпадающих меню. В условии логическое "И" ставится. А "ИЛИ" просто выводит нужные строки(уже реализовал тут, мне для И надо понять принцип).

Код таблицы(полный длиннее раза в 2-3, рядов больше):

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<table cellspacing="0" cellpadding="0" cols="7" id="table1" rule="none">
    <colgroup>
  <col width="191" />
  <col width="254" />
  <col width="269" />
  <col width="269" />
  <col width="269" />
  <col width="58" />
  <col width="106" />
  </colgroup>
  <tbody>
    <tr>
      <td class="ingcellh" width="191"><strong>Ингредиент</strong></td>
      <td class="ingcellh" width="254"><strong>Св-во 1</strong></td>
      <td class="ingcellh" width="269"><strong>Св-во 2</strong></td>
      <td class="ingcellh" width="269"><strong>Св-во 3</strong></td>
      <td class="ingcellh" width="269"><strong>Св-во 4</strong></td>
      <td class="ingcellh" width="58"><strong>Вес</strong></td>
      <td class="ingcellh" width="106"><strong>Стоимость</strong></td>
    </tr>
    <tr>
      <td class="ingcellin">Абесинский окунь</td>
      <td class="ingcell">Уязвимость к холоду</td>
      <td class="ingcell">Повышение навыка: скрытность</td>
      <td class="ingcell">Уязвимость к яду</td>
      <td class="ingcell">Повышение навыка: восстановление</td>
      <td class="ingcellw">0.5</td>
      <td class="ingcellc">15</td>
    </tr>
    <tr>
      <td class="ingcellin">Алый корень Нирна</td>
      <td class="ingcell">Урон здоровью</td>
      <td class="ingcell">Урон запасу сил</td>
      <td class="ingcell">Невидимость</td>
      <td class="ingcell">Сопротивление магии</td>
      <td class="ingcellw">0.2</td>
      <td class="ingcellc">10</td>
    </tr>
    <tr>
      <td class="ingcellin">Белянка</td>
      <td class="ingcell">Уязвимость к холоду</td>
      <td class="ingcell">Повышение навыка: тяжелая броня</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcell">Опустошение магии</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">0</td>
    </tr>
    <tr>
      <td class="ingcellin">Бесовский гриб</td>
      <td class="ingcell">Урон здоровью</td>
      <td class="ingcell">Затяжной урон здоровью</td>
      <td class="ingcell">Паралич</td>
      <td class="ingcell">Восстановление здоровья</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">0</td>
    </tr>
    <tr>
      <td class="ingcellin">Бойцовая рыбка</td>
      <td class="ingcell">Урон здоровью</td>
      <td class="ingcell">Повышение навыка: изменение</td>
      <td class="ingcell">Замедление</td>
      <td class="ingcell">Повышение переносимого веса</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">15</td>
    </tr>
    <tr>
      <td class="ingcellin">Болотный стручок</td>
      <td class="ingcell">Сопротивление электричеству</td>
      <td class="ingcell">Затяжной урон магии</td>
      <td class="ingcell">Паралич</td>
      <td class="ingcell">Восстановление здоровья</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">5</td>
    </tr>
    <tr>
      <td class="ingcellin">Большие рога</td>
      <td class="ingcell">Восстановление запаса сил</td>
      <td class="ingcell">Повышение запаса сил</td>
      <td class="ingcell">Замедление</td>
      <td class="ingcell">Повреждение регенерации запаса сил</td>
      <td class="ingcellw">0.1</td>
      <td class="ingcellc">2</td>
    </tr>
    <tr>
      <td class="ingcellin">Бородатый мох</td>
      <td class="ingcell">Урон магии</td>
      <td class="ingcell">Повышение здоровья</td>
      <td class="ingcell">Повреждение регенерации магии</td>
      <td class="ingcell">Повышение навыка: одноручное оружие</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">1</td>
    </tr>
    <tr>
      <td class="ingcellin">Вересковое сердце</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcell">Повышение навыка: блокирование</td>
      <td class="ingcell">Паралич</td>
      <td class="ingcell">Повышение магии</td>
      <td class="ingcellw">0.5</td>
      <td class="ingcellc">20</td>
    </tr>
    <tr>
      <td class="ingcellin">Ветка чертополоха</td>
      <td class="ingcell">Сопротивление холоду</td>
      <td class="ingcell">Опустошение запаса сил</td>
      <td class="ingcell">Сопротивление ядам</td>
      <td class="ingcell">Повышение навыка: тяжелая броня</td>
      <td class="ingcellw">0.1</td>
      <td class="ingcellc">1</td>
    </tr>
    <tr>
      <td class="ingcellin">Виноград джазби</td>
      <td class="ingcell">Уязвимость к магии</td>
      <td class="ingcell">Повышение магии</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcell">Опустошение здоровья</td>
      <td class="ingcellw">0.2</td>
      <td class="ingcellc">1</td>
    </tr>
    <tr>
      <td class="ingcellin">Гигантский лишайник</td>
      <td class="ingcell">Уязвимость к электричеству</td>
      <td class="ingcell">Опустошение магии</td>
      <td class="ingcell">Уязвимость к яду</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">5</td>
    </tr>
    <tr>
      <td class="ingcellin">Глаз саблезуба</td>
      <td class="ingcell">Восстановление запаса сил</td>
      <td class="ingcell">Опустошение здоровья</td>
      <td class="ingcell">Урон магии</td>
      <td class="ingcell">Восстановление здоровья</td>
      <td class="ingcellw">0.1</td>
      <td class="ingcellc">2</td>
    </tr>
    <tr>
      <td class="ingcellin">Гниль Намиры</td>
      <td class="ingcell">Урон магии</td>
      <td class="ingcell">Повышение навыка: взлом</td>
      <td class="ingcell">Страх</td>
      <td class="ingcell">Восстановление здоровья</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">0</td>
    </tr>
    <tr>
      <td class="ingcellin">Голубой горноцвет</td>
      <td class="ingcell">Восстановление здоровья</td>
      <td class="ingcell">Повышение навыка: колдовство</td>
      <td class="ingcell">Повышение здоровья</td>
      <td class="ingcell">Повреждение регенерации магии</td>
      <td class="ingcellw">0.1</td>
      <td class="ingcellc">2</td>
    </tr>
    <tr>
      <td class="ingcellin">Двемерское масло</td>
      <td class="ingcell">Уязвимость к магии</td>
      <td class="ingcell">Повышение навыка: иллюзия</td>
      <td class="ingcell">Регенерация магии</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcellw">0.3</td>
      <td class="ingcellc">15</td>
    </tr>
    <tr>
      <td class="ingcellin">Жемчужина</td>
      <td class="ingcell">Восстановление запаса сил</td>
      <td class="ingcell">Повышение навыка: блокирование</td>
      <td class="ingcell">Восстановление магии</td>
      <td class="ingcell">Сопротивление электричеству</td>
      <td class="ingcellw">0.1</td>
      <td class="ingcellc">2</td>
    </tr>
  </tbody>
</table>

Код выпадающего меню(урезанное, для теста должно хватить)

HTML5
1
2
3
4
5
6
7
8
9
<select id="properties">
<option>Восстановление здоровья</option>
<option>Невидимость</option>
<option>Паралич</option>
<option>Повышение переносимого веса</option>
<option>Сопротивление магии</option>
<option>Урон запасу сил</option>
<option>Урон здоровью</option>
</select>

Второе выпадающее меню и третье и так далее я буду через js наверное клонировать, вот код:

JavaScript
1
2
3
4
5
    $(document).ready(function(){   
        var options2 = $('select#properties').html();
        $('select#properties').after('<select id="properties2">'+options2+'</select>');
        $('select#properties2').after('<select id="properties3">'+options2+'</select>');
    });

Думаю смысл ясен, это чтобы облегчить процесс.

Вот весь код который я написал:

JavaScript
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
60
61
62
63
64
65
66
67
68
69
70
    $(document).ready(function(){   
        var options2 = $('select#properties').html();
        $('select#properties').after('<select id="properties2">'+options2+'</select>');
        $('select#properties2').after('<select id="properties3">'+options2+'</select>');
        $('#table1 tr:gt(0)').each(function(i){
            $(this).attr('id', 'IDingredient'+i);
        });
        
        $("#confirm").click(function(){ 
        if ($('#booltype option:selected').text()=='ИЛИ'){
            var property1 = $("#properties option:selected").text();
            var property2 = $("#properties2 option:selected").text();
            var property3 = $("#properties3 option:selected").text();
            $("td").removeClass("selcell");
            $("#table1 tr").css("border","0");
            var row = $("#table1 td:contains("+property1+")");
            var row2 = $("#table1 td:contains("+property2+")");
            var row3 = $("#table1 td:contains("+property3+")");
            row.addClass("selcell");
            row2.addClass("selcell");
            row3.addClass("selcell");
            var result = $(row).closest("tr").addClass("selectedrow");
            var result2 = $(row2).closest("tr").addClass("selectedrow");
            var result3 = $(row3).closest("tr").addClass("selectedrow");
            result.css("border","5px solid #FFCC4D").css("border-left","5px solid red");
            result2.css("border","5px solid #FFCC4D").css("border-left","5px solid red");
            result3.css("border","5px solid #FFCC4D").css("border-left","5px solid red");
            $("#table1 tr").css("display","none");
            result.css("display","");
            result2.css("display","");
            result3.css("display","");
            $("#table1 tr:first").css("display","");
        }
        else {
            var property1 = $("#properties option:selected").text();
            var property2 = $("#properties2 option:selected").text();
            $("td").removeClass("selcell");
            $("#table1 tr").css("border","0");
            
            var ingrednumber = $("#table1 tr[id ^= 'IDingredient']").length;//93 ingredients
            var searchrow = $("#table1 tr:gt(0)");
            for (var i=0; i<(ingrednumber); i=i+1){
                var rowproperty1 = $(searchrow).eq(i).has('td:contains('+property1+')');
                var rowproperty2 = $(searchrow).eq(i).has('td:contains('+property2+')');
                
                if ( $(rowproperty1)==$(rowproperty2) )
                {
                    alert("Yeah!");
                };
                rowproperty1.css("background","red");
                
                if (i>90)
                {
                    //alert(i);
                    //$(searchrow).eq(i).css("background","red");
                    alert($(rowproperty2).text());
                };
            }
            
            
        }
        }); 
        
        $("#reset").click(function(){ 
        $("tr").css("display","").css("border","0");
        $("td").removeClass("selcell");
        });
        
        
    });

Заранее спасибо больше!

@skv1991 · 19.05.2012, 02:19 **[ТС]**

В общем, я так понял бесполезно ждать ответа, ай ай ай, форум программистов))) Решил все сам, вот решение:

JavaScript
1
2
3
4
5
6
var property1 = $("#properties option:selected").text();
var property2 = $("#properties2 option:selected").text();
var property3 = $("#properties3 option:selected").text();
var property4 = $("#properties4 option:selected").text();
 
var rowproperty1 = $("#table1 tr:gt(0)").has('td:contains('+property1+')').has('td:contains('+property2+')').has('td:contains('+property3+')').has('td:contains('+property4+')');

То есть проверяем через .has() вхождение нужных элементов в рядах таблицы по очереди, пропуская первую строку(:gt(0)).
Весь код не выкладываю, он большой и уже там много стороннего, смысл ясен.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@skv1991 19 / 19 / 2 Регистрация: 14.05.2012 Сообщений: 39
	17.05.2012, 00:52 [ТС]
	Это так сложно реализовать? 0

@suharik 261 / 247 / 57 Регистрация: 03.09.2010 Сообщений: 805
	17.05.2012, 10:10
	Вечерком отпишу 0