Атрибут data-* тега <tbody>
Описание
Атрибуты data-* для элемента <tbody> позволяют хранить дополнительную информацию о группе строк таблицы, которая не отображается непосредственно, но может быть использована в JavaScript или CSS.
<table>
<tbody data-category="electronics" data-currency="USD" data-version="2.4">
<tr>
<td>Смартфон</td>
<td>799</td>
</tr>
<tr>
<td>Ноутбук</td>
<td>1299</td>
</tr>
</tbody>
</table>
Основные возможности:
| Применение | Преимущества | Пример |
|---|---|---|
| Хранение метаданных | Семантическая группировка данных | data-category="electronics" |
| Конфигурация JavaScript | Управление поведением скриптов | data-sortable="true" |
| Доступ из CSS | Условная стилизация | [data-currency="USD"] { color: green; } |
Особенности работы:
- Имена атрибутов должны начинаться с
data- - Значения хранятся как строки (преобразуются при необходимости)
- Доступны через JavaScript API (
dataset) - Поддерживаются всеми современными браузерами
Пример с JavaScript:
<table>
<tbody data-category="electronics">
<tr><td>Телефон</td></tr>
</tbody>
</table>
<script>
const tbody = document.querySelector('tbody');
console.log(tbody.dataset.category); // "electronics"
</script>
Пример с CSS:
<style>
tbody[data-currency="USD"] td:last-child::after {
content: " $";
}
tbody[data-currency="EUR"] td:last-child::after {
content: " €";
}
</style>
<table>
<tbody data-currency="USD">
<tr><td>Продукт</td><td>100</td></tr>
</tbody>
</table>
Рекомендации:
- Используйте kebab-case для имен атрибутов
- Храните только простые данные (для сложных - JSON)
- Избегайте дублирования видимого контента
- Документируйте используемые data-атрибуты
Ограничения:
- Не предназначены для стилизации (используйте классы)
- Могут увеличивать размер DOM
- Требуется обработка в JavaScript для сложной логики
Примечание: Для хранения сложных структур данных используйте преобразование в JSON:
data-products='[{"id":1,"name":"Phone"}]'