Покрасить несколько ячеек таблицы зажав ЛКМ
У меня есть html-таблица, кликнув по ячейке, можно изменить цвет ячейки, но их может быть очень много. Я хочу, чтоб при зажатии ЛКМ и ведя курсором по таблице, все ячейки, на которые наведется курсор, меняли цвет, а при отпускании ЛКМ — переставали менять цвет. Как это можно реализовать? Желательно, на чистом JS!
Отслеживать
задан 14 авг 2021 в 21:40
3 1 1 бронзовый знак
А у меня нет html-таблицы. Штоделать?!
14 авг 2021 в 22:03
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
На чистом JS (это базовый пример без поддержки тачскринов, только мышь!):
/* добавление таблицы в разметку (просто пустые ячейки, для демонстрации) */ document.body.insertAdjacentHTML('beforeend', ' '); const tBody = document.querySelector('tbody'); for (let tr, i = 0; i < 100; ++i) < if (!(i % 20)) tr = tBody.insertRow(); tr.insertCell(); >/* переменные, и функция сортировки (для использования в обработчике) */ const mathSort = (a, b) => a - b; let isMbPressed = false, // флаг "кнопка мыши зажата" range = [[-1, -1], [-1, -1]]; // координаты "углов" выделенного диапазона ячеек, две точки ([столбец, строка]) /* функция обработчика DOM-событий - в ней основная логика */ const handler = evt => < const tr = evt.target.closest('tr'); const getCoords = () =>[ // функция получения табличных координат мыши [. tr.cells].indexOf(evt.target), // индекс ячейки в строке (X-координата) [. tr.parentElement.rows].indexOf(tr), // индекс строки в таблице (Y-координата) ]; switch (evt.type) < // ветвление по типу события case 'mouseleave': if (evt.target === evt.currentTarget) isMbPressed = false; // при выходе курсора за границы tbody, снимаем флаг зажатия break; case 'mousedown': case 'mouseup': isMbPressed = evt.type === 'mousedown'; range[+!isMbPressed] = getCoords(); // если событие зажатия, запомним как координаты начальной точки (range[0]), иначе как координаты конечной точки (range[1]) case 'mousemove': if (!isMbPressed) break; // движения мыши без зажатой кнопки не обрабатываем range[1] = getCoords(); // обновляем координату конечной точки диапазона console.clear(), console.log(JSON.stringify(range)); const [col1, col2] = [range[0][0], range[1][0]].sort(mathSort), // возьмем X-координаты по возрастанию их значений [row1, row2] = [range[0][1], range[1][1]].sort(mathSort); // и Y-координаты аналогично [. tBody.rows].forEach((tr, row) =>< const inRowRange = (row >= row1) && (row < const inColRange = (col >= col1) && (col ); >); > >; ['mousedown', 'mouseup', 'mousemove', 'mouseleave'].forEach( // перебор имен (типов событий), их будет обрабатывать одна общая функция evtType => tBody.addEventListener(evtType, handler) // обработка всех событий на их всплытии (делегируем ее tbody) );html, body < margin: 0; padding: 0; >table < border-collapse: collapse; >td
Поменять цвет ячейки в таблице средствами CSS
Хотелось бы class сделать, т.к. покрасить нужно сделать еще для несколько полей и размер html увеличивается.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Форматирование ячейки в dataGridView. Как поменять цвет определенной ячейки
Хочу поменять цвет выбранной ячейки, так что бы когда при выбраной строки цвет ячейки оставался.
Поменять цвет ячейки в зависимости от текста ячейки
Всем привет! помогите с задачкой! как в VBA реализовать заливку ячеек по содержимому УСО №25.
css цвет ячейки
Всем привет! У меня есть код: Код:.art-content .art-postcontent-0 .layout-item-2 < color.
Не отрабатывается цвет ячейки таблицы, заданный в css
Создал обычную таблицу, применил свойство Border-collapse, и задаю цвет border-color, также задаю.
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
Вот так получается:
1 2 3 4
.pokrasitClass { background-color: #BFDBF2; color: #FF0000; }
и добавлять к нужным td и все должно работать.
Регистрация: 02.12.2015
Сообщений: 620
UchihaSV, спасибо! Попробую, но добавлять класс придется скриптом. Опасаюсь, не выиграю ничего.
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
Сообщение от НиколайВасильев 
Опасаюсь, не выиграю ничего
А что вы хотели там выиграть?
Регистрация: 02.12.2015
Сообщений: 620
UchihaSV, размер html уменьшить
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
Сообщение от НиколайВасильев
размер html уменьшить
Ну так классы в html и отдельный css уменьшают получаются.
Регистрация: 02.12.2015
Сообщений: 620
Сообщение от UchihaSV
Ну так классы в html и отдельный css уменьшают получаются
Пока не знаю, должны уменьшить, проверяю. На сервере постоянно удаляются картинки jpeg и я всунул их в один индексный файл img src=»data:image/jpeg;base64. Очень похоже на антивирус. Пальцами пакости никто не будет делать.
К php претензий пока нет, но он получился огромный. Выбрасываю всё.
td>input type="text"
заменил на
td contenteditable="true">
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
По таблице css не изменяется цвет и шрифт в html
подключеные таблицы css не изменяют шрифт и цвет абзаца , не знаю толи не правильно описываю саму.
Word — как в таблице задать цвет фона ячейки ?
Всем привет. Я создал таблицу, но так и не нашел какой командой задать цвет фона ячейки. Заранее.
Поменять цвет ячейки Excel
Здравствуйте! 🙂 1) Как поменять цвет ячейки Excel средствами C#? 2) Как объединить ячейки Excel.
При редактировании текста в таблице, цвет ячейки менялся автоматически
Здравствуйте, вопрос такой, есть таблица в ней есть значения по типу открыто фон ячейки зеленый.
Можно ли задать цвет фона одной ячейки в таблице MS Access?
Монстры, подкажите: можно-ли задать цвет фона одной ячейки в таблице MS Access? Если да, то как?
Как сделать так, чтобы по клику на любую ячейку таблицы в красный фон красились все ячейки этой колонки?
Как сделать так, чтобы по клику на любую ячейку таблицы в красный фон красились все ячейки этой колонки? у меня не получается сделать, чтобы все ячейки колонки окрашивались одновременно по нажатию на одну ячейку.
let tds = document.querySelectorAll('#table td'); tds.forEach(function(td) < td.addEventListener('click',function()< if(td.dataset.col==this.dataset.col)< td.style.backgroundColor="red"; >>) >) Отслеживать
задан 10 июл 2022 в 15:16
5 1 1 бронзовый знак
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
const tds = document.querySelectorAll('#table td') tds.forEach(td => < td.addEventListener('click', e =>< document.querySelectorAll(`#table [data-col="$"]`).forEach(e => e.style.backgroundColor = 'red' ) >) >)#table td
Отслеживать
ответ дан 10 июл 2022 в 15:25
3,349 2 2 золотых знака 9 9 серебряных знаков 28 28 бронзовых знаков
Спасибо. Два часа мучилась.
10 июл 2022 в 15:31
Не за что, насчёт того как вы пытались сделать это, постарайтесь выбирать элементы как только можно конкретней (как например я сделал в этом примере), а не проверять все, т.к. к примеру если будет 1000+ или того больше элементов, то тогда будет проверка всех этих элементов и на мало мощных устройствах это может вызвать проблемы с производительностью, хоть и временные.
10 июл 2022 в 15:34
@Виктория Ой да, забыл сказать, если вы посчитали мой ответ полезным можете нажать на стрелку вверх (слева сверху от моего ответа), а если мой ответ является решением для вашей проблемы, то нажмите на галочку (Также слева сверху от моего ответа).
Как покрасить ячейку в html
++$a — это что за конструкция?
Вам следует в цикле вставить условие, при котором в тег TD будет подставляться стилевое свойство style=»background:red», например. Это что касаемо ячейки. И примерно то же проделать для тега TR, чтобы покрасить нужную строку.
автор: modestes (08.11.2012 в 20:49) письмо автору
++$a Это увеличение значения переменной на единицу
Я в принципе понимаю что нужно условие, но никак не соображу как это записать
автор: Igorek (09.11.2012 в 08:40) письмо автору
автор: Igorek (09.11.2012 в 08:36) письмо автору
for ( $a = 1 ; $a <
$style = ( $a == 5 ) ? » style=’background-color:green'» : » ;
echo » ;
for ( $b = 1 ; $b <
$style = ( $a == 2 AND $b == 3 ) ? » style=’background-color:green'» : » ;
echo » . $a . $b . ‘
‘ ;
>
echo ‘
‘ ;
>