JS властивість CSSStyleDeclaration.emptyCells

Загальний опис

element.style.emptyCells — це властивість CSS, яка використовується для визначення того, чи повинні відображатися межі порожніх комірок у таблицях. Властивість може приймати значення show або hide.

Використання element.style.emptyCells дозволяє контролювати вигляд таблиці, коли деякі з її комірок не містять жодного контенту. Це може бути корисно для покращення візуальної привабливості таблиці або для відповідності певному стилістичному оформленню.

Щоб застосувати властивість до певної таблиці або комірки, спочатку треба отримати доступ до елемента за допомогою JavaScript. Наприклад, для того, щоб показати межі порожніх комірок в таблиці:

let table = document.getElementById('myTable');
table.style.emptyCells = 'show';

Навпаки, щоб приховати межі порожніх комірок:

table.style.emptyCells = 'hide';

Деталі роботи з властивістю

Значення show означає, що межі порожніх комірок таблиці будуть відображатися так само, як і межі заповнених комірок. Це значення є типовим для браузерів:

table.style.emptyCells = 'show';

Значення hide приховує межі порожніх комірок, залишаючи їх невидимими, що може зробити таблицю менш навантаженою візуально:

table.style.emptyCells = 'hide';

Ця властивість особливо корисна при роботі з таблицями, що містять багато порожніх комірок, які можуть нести лише декоративне навантаження. За допомогою emptyCells можна уникнути зайвого візуального шуму.

Практичний приклад

Уявімо, що у вас є таблиця з декількома порожніми комірками, і ви хочете керувати їх відображенням:

let table = document.createElement('table');
let row = table.insertRow();
let cell1 = row.insertCell();
let cell2 = row.insertCell();
cell1.innerHTML = 'Заповнена комірка';
cell2.innerHTML = ''; // Порожня комірка

document.body.appendChild(table);

// Показати межі порожніх комірок
table.style.emptyCells = 'show';

// Приховати межі порожніх комірок
setTimeout(() => {
    table.style.emptyCells = 'hide';
}, 3000);

Ця властивість може бути використана у різних випадках, коли потрібно відобразити або приховати порожні комірки в таблицях, наприклад, у фінансових звітах, розкладах або інших таблицях, де порожні комірки можуть зустрічатися часто. Це дозволяє зберігати таблиці чистими та організованими, покращуючи загальний вигляд веб-сторінки.

Таким чином, element.style.emptyCells — це простий, але потужний інструмент для керування відображенням таблиць у веб-розробці, дозволяючи контролювати візуальне представлення порожніх комірок.

Синтаксис

element.style.emptyCells

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2

let table = document.createElement('table');
let row = table.insertRow();
for (let i = 0; i < 3; i++) {
    let cell = row.insertCell();
    if (i % 2 === 0) cell.innerHTML = 'Зміст';
}

document.body.appendChild(table);

let button = document.createElement('button');
button.innerHTML = 'Перемкнути порожні комірки';
document.body.appendChild(button);

button.addEventListener('click', () => {
    table.style.emptyCells = table.style.emptyCells === 'hide' ? 'show' : 'hide';
});

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        let table = document.createElement('table');
        data.forEach(rowData => {
            let row = table.insertRow();
            rowData.forEach(cellData => {
                let cell = row.insertCell();
                cell.innerHTML = cellData || '';
            });
        });

        let emptyCellsCount = table.querySelectorAll('td:empty').length;
        table.style.emptyCells = emptyCellsCount > 5 ? 'hide' : 'show';

        document.body.appendChild(table);
    });