Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
 Аватар для drziv
51 / 40 / 0
Регистрация: 25.05.2011
Сообщений: 222

Одним кликом подсветить несколько ячеек таблицы

22.12.2015, 12:48. Показов 903. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте. Подскажите каким образом можно изменить цвет нескольких ячеек в разных таблицах?

Имеется три таблицы. В каждой таблице по 96 ячеек.
Таблица №1 - 96 ячеек
Таблица №2 - 96 ячеек
Таблица №3 - 96 ячеек
Нумерация ячеек с 1 по 96.

Необходимо кликнуть по одной ячейке в таблице №1 и после клика должны подсвечиваться еще по ячейке в таблице №2 и №3.

Надеюсь понятно изложил.
Спасибо!!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
22.12.2015, 12:48
Ответы с готовыми решениями:

Одним кликом перейти на несколько сайтов
У меня подано много бесплатных частных объявлений на различных досках объявлений. Каждый день я актуализирую каждое объявление путем...

AutoCAD 2019 как "одним кликом" переключать сразу несколько выбранных настроек?
Настройки, которые я иногда переключаю в процессе работы, включают в себя цвет фона в модели, длина и цвет курсора-перекрестья, цвета и...

Компиляция и запуск одним кликом
Я только начал изучать JAVA и хотел узнать есть ли софт или какое то IDE что бы можно было сразу запустить Java проект. Что бы не...

3
 Аватар для arcmag
347 / 322 / 203
Регистрация: 27.06.2014
Сообщений: 762
22.12.2015, 13:53
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        function act (selectors) {
            var t = [], f = function (e) {
                var o = e.target, x, y;
                if (o.tagName !== "TD") return;
                while (o.tagName !== "TABLE") {
                    if (o.tagName === "TR") y = o.rowIndex;
                    if (o.tagName === "TD") x = o.cellIndex;
                    o = o.parentNode;
                }
                for (var i = 0, len = t.length; i < len; i++) {
                    var b = t[i].rows[y].cells[x];
                    b.style.background = b.style.background === "red" ? "white" : "red";
                }
            };
            for (var i = 0; i < selectors.length; i++) {
                t[i] = document.querySelector (selectors[i]);
                t[i].addEventListener ("click", f);
            }
        };
        window.addEventListener("load", function () {
            // act ([массив со списком селектором таблиц]); 
            act (["#t1", "#t2", "#t3"]);
        });
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
    <table id="t1">
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
        <tr>
            <td>7</td><td>8</td><td>9</td>
        </tr>
    </table>
    <table id="t2">
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
        <tr>
            <td>7</td><td>8</td><td>9</td>
        </tr>
    </table>
    <table id="t3">
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
        <tr>
            <td>7</td><td>8</td><td>9</td>
        </tr>
    </table>
1
 Аватар для drziv
51 / 40 / 0
Регистрация: 25.05.2011
Сообщений: 222
22.12.2015, 14:47  [ТС]
Отлично все работает. Спасибо!!
Подскажите, в какую сторону в коде смотреть, чтобы ячейки самому назначить какие подсвечивать, а не автоматом. Допустим в первой таблице нажал на ячейку №1, во второй таблице подсветилась ячейка 5(или которую назначил), в третей ячейка №9. Такое возможно сделать?
Спасибо!!
0
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
22.12.2015, 22:51
arcmag, Мне кажется первую проверку лучше так сделать
JavaScript
1
2
var o = e.target.closest('td'), x, y;
                if (!o) return;
на случай если внутри ячейки информация будет внутри какого то тега и клик попадет по ней.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
22.12.2015, 22:51
Помогаю со студенческими работами здесь

Открыть ComboBoxColumn одним кликом
Добрый день! Имеется таблица с одной колонкой состоящая из ComboBox, так вот ооочень не удобно кликать по 2-3 раза, чтобы выбрать...

Навигация в krusader одним кликом мышки
Под kubuntu установил крусадер. Всем устраивает, но... Навигация по папкам происходит в 2 клика мышки, что лично меня раздражает. В тотал...

Как включить все слои одним кликом
Мне скинули макет для верстки странички. В нем все слои отключены (&quot;глазик&quot; не светится). Каждый слой вручную очень долго и нудно. ...

Одним кликом открытия папок как сделать?
Как в 7ке сделать одним кликом мыши открытия папок?и все на раб столе.

Как увеличить изображение одним кликом в рамку ?
Всем привет, ребят, мне надо при помощи jQuery сделать увиличения картинки... Добовляется фотографии так: &lt;img...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru