Атрибут data-* тега <td>
Описание
Атрибуты data-* для элемента <td> позволяют хранить дополнительную информацию в ячейке таблицы, которая не отображается визуально, но может быть использована в JavaScript или CSS.
<table>
<tr>
<td data-product-id="P-1001"
data-price="29.99"
data-currency="USD">
Смартфон X
</td>
</tr>
</table>
Основные возможности:
| Применение | Преимущества | Пример |
|---|---|---|
| Хранение метаданных | Связь с базой данных | data-id="A001" |
| Конфигурация | Настройка поведения | data-sortable="true" |
| Доступ из CSS | Условная стилизация | [data-status="error"] |
Особенности работы:
- Имена атрибутов должны начинаться с
data- - Значения хранятся как строки (автоматическое преобразование)
- Доступ через JavaScript API:
element.dataset - Полная поддержка во всех современных браузерах
Пример с JavaScript:
<table>
<tr>
<td data-product="laptop" data-price="1200">Ноутбук</td>
</tr>
</table>
<script>
const cell = document.querySelector('td');
console.log(cell.dataset.product); // "laptop"
console.log(cell.dataset.price); // "1200"
</script>
Пример с CSS:
<style>
td[data-currency="USD"]::after {
content: " $";
}
td[data-currency="EUR"]::after {
content: " €";
}
</style>
<table>
<tr>
<td data-currency="USD">100</td>
</tr>
</table>
Рекомендации:
- Используйте kebab-case для имен атрибутов (data-product-id)
- Храните только простые данные (для сложных - JSON)
- Избегайте дублирования видимого контента
- Документируйте используемые data-атрибуты
Ограничения:
- Не предназначены для стилизации (используйте классы)
- Могут увеличивать размер DOM
- Требуется обработка в JavaScript для сложной логики
Примечание: Для хранения сложных данных используйте JSON-формат: data-product='{"id":1,"price":99}'