URL скопирован в буфер обмена!
Как сделать выделение строк и столбцов таблицы при наведении на Tilda?
При мощи этой модификации можно настроить подсвечивание строк и столбцов при наведении курсора в блоке CL46. В генераторе можно задать цвет фона и текста подсвечиваемых ячеек. Особенно удобно при работе с большими таблицами — помогает быстрее ориентироваться в данных.
Модификация работает с включенным Autoscale в блоках
Модификация работает со стандартными блоками
Номер модификации в библиотеке TiCode
ID блока таблицы (CL46)
Цвет фона строк
Цвет текста строк
Цвет фона столбцов
Цвет текста столбцов
Цвет фона активной ячейки
Цвет текста активной ячейки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD121--><style>
.t431__table tr.hovered-row td {
background-color: #f96855 !important;
color: #ffffff !important;
}
.t431__table td.hovered-col {
background-color: #f96855 !important;
color: #ffffff !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const TCDTableCL46 = '#rec1189505936';
const TCD124 = TCDTableCL46.split(',')
.map(id => document.querySelector(id.trim()))
.filter(el => el !== null);
if (TCD124.length === 0) return;
function TiCode124Highlight() {
TCD124.forEach(container => {
const TCDCL46 = container.querySelector('.t431__table');
if (!TCDCL46) return;
const tctildacb = Array.from(TCDCL46.querySelectorAll('tbody tr'));
if (tctildacb.length === 0) {
setTimeout(TiCode124Highlight, 500);
return;
}
tctildacb.forEach((row) => {
const tildatc = row.querySelectorAll('td');
tildatc.forEach((cell, colIndex) => {
cell.addEventListener('mouseenter', () => {
row.classList.add('hovered-row');
tctildacb.forEach((r) => {
const targetCell = r.querySelectorAll('td')[colIndex];
if (targetCell) targetCell.classList.add('hovered-col');
});
cell.dataset.TCDorigbg = cell.style.backgroundColor;
cell.dataset.TCDorigclr = cell.style.color;
cell.style.setProperty('background-color', '#f96855', 'important');
cell.style.setProperty('color', '#ffffff', 'important');
});
cell.addEventListener('mouseleave', () => {
row.classList.remove('hovered-row');
tctildacb.forEach((r) => {
const targetCell = r.querySelectorAll('td')[colIndex];
if (targetCell) targetCell.classList.remove('hovered-col');
});
if (cell.dataset.TCDorigbg !== undefined) {
cell.style.setProperty('background-color', cell.dataset.TCDorigbg, 'important');
cell.style.setProperty('color', cell.dataset.TCDorigclr || '', 'important');
delete cell.dataset.TCDorigbg;
delete cell.dataset.TCDorigclr;
}
});
});
});
});
}
setTimeout(TiCode124Highlight, 1000);
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем блок таблицы CL46, копируем id и вставляем в генератор в поле "ID блока таблицы (CL46)". Если таблиц несколько, то указываем id через запятую без пробела. Например: #rec1183333911,#rec1234567890
2. Указываем цвет ячеек при наведении:
Цвет фона активной ячейки и Цвет текста активной ячейки - указываем цвет текста и фона для ячейки на которую навели курсор;
Цвет фона строк и Цвет фона столбцов - указываем цвет фона для строк и столбцов при наведении. Если нужно что-то одно, то второе поле уставляем пустым;
Цвет текста строк и Цвет текста столбцов - указываем цвет текста для строк и столбцов. Если нужно что-то одно, то второе поле уставляем пустым;
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под таблицами.
2. Указываем цвет ячеек при наведении:
Цвет фона активной ячейки и Цвет текста активной ячейки - указываем цвет текста и фона для ячейки на которую навели курсор;
Цвет фона строк и Цвет фона столбцов - указываем цвет фона для строк и столбцов при наведении. Если нужно что-то одно, то второе поле уставляем пустым;
Цвет текста строк и Цвет текста столбцов - указываем цвет текста для строк и столбцов. Если нужно что-то одно, то второе поле уставляем пустым;
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под таблицами.
