Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
1 / 1 / 0
Регистрация: 05.08.2019
Сообщений: 37
1

Как выделить несколько полей формы при наведение на одну из них

12.01.2020, 20:51. Просмотров 866. Ответов 4
Метки нет (Все метки)

Здравствуйте, подскажите пожалуйста как при наведение на одно поле из формы чтобы менялся цвет на несколько полей одновременно. проблема в том что эти поля выводятся циклом, и обводить надо поля у кого совпадает iid.
Например:
HTML5
1
2
3
4
5
6
7
8
9
10
<form>
<table>
<tr>
<td><input id="product" iid="$idprod"></td>
<td><input id="price" iid="$idprod"></td>
<td><input id="title" iid="$idprod"></td>
<td><input id="total" iid="$idprod"></td>
</tr>
</table>
</form>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.01.2020, 20:51
Ответы с готовыми решениями:

Несколько ОС на одном компе. Как одну из них переустановить, не повредив остальные?
На разных разделах диска установлены 3 ОС: 98, XP(просто) и XP SP3. При загрузке выбираю в менюшке....

Изменение стилей кнопок при наведение на них курсора
Добрый день. Имеется 4 кнопки на сайте, которые имеют какой-то статичный цвет. Я хочу сделать так...

Как подключить несколько таблиц одной базы (MySql) в один файл .php и выводить данные из них? Одну таблицу вывожу так:
Поключение к базе: &lt;?php $mysqli = false; function connectDB () { global $mysqli; ...

Выделить в textBox одну или несколько букв другим цветом
На форме имеется элемент Textbox с некоторым текстом. Подскажите пожалуйста, как выделить одну...

4
370 / 224 / 111
Регистрация: 22.11.2016
Сообщений: 375
13.01.2020, 20:22 2
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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .bgHover { background-color: red; }
    </style>
</head>
<body>
    <form>
        <table>
        <tr class="tr">
            <td><input id="product" iid="1" value="1"></td>
            <td><input id="price" iid="1" value="1"></td>
            <td><input id="title" iid="4" value="4"></td>
            <td><input id="total" iid="3" value="3"></td>
            <td><input id="total" iid="1" value="1"></td>
            <td><input id="total" iid="4" value="4"></td>
            <td><input id="total" iid="3" value="3"></td>
        </tr>
        </table>
        </form>
 
    <script type="text/javascript">
        "use strict";
 
        let table = document.querySelector("table");
        table.addEventListener("mouseover", haHover);
 
        function haHover() {
            let elem = e.target;
            if (elem.tagName === "INPUT") {
                let iid = elem.getAttribute("iid");
                let inputs = document.querySelectorAll(`input[iid='${iid}'`);
 
                if(inputs.length > 1) {
                    for (let input of inputs) {
                        input.classList.add("bgHover");
                    }
                }
            } else {
                for (let input of table.querySelectorAll("input")) {
                    input.classList.remove("bgHover");
                }
            }
        }
    </script>
</body>
</html>
0
1 / 1 / 0
Регистрация: 05.08.2019
Сообщений: 37
14.01.2020, 19:08  [ТС] 3
fixeri, не работает, скопировала весь ваш скрипт с формой со всем, cоздала новый документ для пробы, и ничего не работает. Наверно где то ошибка.
0
370 / 224 / 111
Регистрация: 22.11.2016
Сообщений: 375
14.01.2020, 19:26 4
Лучший ответ Сообщение было отмечено kristi14 как решение

Решение

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .bgHover { background-color: red; }
    </style>
</head>
<body>
    <form>
        <table>
        <tr class="tr">
            <td><input id="product" iid="1" value="1"></td>
            <td><input id="price" iid="1" value="1"></td>
            <td><input id="title" iid="4" value="4"></td>
            <td><input id="total" iid="3" value="3"></td>
            <td><input id="total" iid="1" value="1"></td>
            <td><input id="total" iid="4" value="4"></td>
            <td><input id="total" iid="3" value="3"></td>
        </tr>
        </table>
        </form>
 
    <script type="text/javascript">
        "use strict";
 
        let table = document.querySelector("table");
        table.addEventListener("mouseover", haHover);
 
        function haHover(e) {
            let elem = e.target;
            if (elem.tagName === "INPUT") {
                let iid = elem.getAttribute("iid");
                let inputs = document.querySelectorAll(`input[iid='${iid}'`);
 
                if(inputs.length > 1) {
                    for (let input of inputs) {
                        input.classList.add("bgHover");
                    }
                }
            } else {
                for (let input of table.querySelectorAll("input")) {
                    input.classList.remove("bgHover");
                }
            }
        }
    </script>
</body>
</html>
1
1 / 1 / 0
Регистрация: 05.08.2019
Сообщений: 37
14.01.2020, 20:06  [ТС] 5
fixeri, спасибо, все работает.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.01.2020, 20:06

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Ввести в одну строку несколько полей одной записи
запись имеет структуру struct mess{ char text; char data; int id; };...

Если в файле имеется несколько строк с наибольшей длинной, то получить одну их них
Дан текстовый файл f. Получить самую длинную стpоку файла. Если в файле имеется несколько стpок с...

Как выделить несколько объектов на одной картинке при помощи лассо ?
Всем добрый вечер! Вопрос, может и смешной, но у меня не получается. Если я выделила ( в...

Почему в VS, когда одновременно открыто несколько программ, пробуешь запустить одну из них, запускается другая?
Глупейший вопрос.. Почему в Visual Studio, когда одновременно открыто несколько программ и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.