Атрибут data-* тега <tr>

Описание

Атрибуты data-* для тега <tr> позволяют хранить дополнительную информацию в строке таблицы, невидимую для пользователя, но доступную для JavaScript. Это современный стандартизированный способ хранения произвольных данных в HTML-элементах.

Пример использования:
<table> <tr data-id="user-123" data-role="admin" data-registration-date="2025-01-15"> <td>Иван Иванов</td> <td>Администратор</td> </tr> </table>

Особенности data-атрибутов:

  • Должны начинаться с data-
  • Могут содержать любые допустимые в HTML символы
  • Значения хранятся в виде строк
  • Доступны через JavaScript API
  • Не влияют на отображение без дополнительного CSS/JS

Доступ к данным в JavaScript:

<table id="user-table"> <tr data-user-id="123" data-status="active"> <td>Пользователь 1</td> </tr> </table> <script> const row = document.querySelector('#user-table tr'); console.log(row.dataset.userId); // "123" console.log(row.dataset.status); // "active" // Изменение данных row.dataset.status = 'inactive'; </script>

Рекомендации по именованию:

Правило Хороший пример Плохой пример
Формат имени data-user-status dataUserStatus
Стиль написания data-registration-date data-registrationDate
Длина имени data-id data-user-identification-number

Использование с CSS:

<style> tr[data-priority="high"] { background-color: #ffebee; } tr[data-status="inactive"] { opacity: 0.6; } </style> <table> <tr data-priority="high" data-status="active"> <td>Срочная задача</td> </tr> </table>

Лучшие практики:

  • Используйте для хранения ID и метаданных
  • Избегайте хранения больших объемов данных
  • Применяйте для управления состоянием элементов
  • Комбинируйте с классами для сложного поведения

Ограничения:

  • Значения всегда преобразуются в строки
  • Нет встроенной валидации данных
  • Не предназначены для замены базы данных
  • Могут увеличить размер HTML-документа

Пример сложного использования:

<table id="product-table"> <tr data-product='{"id":101,"price":19.99,"stock":42}'> <td>Товар 1</td> <td>$19.99</td> </tr> </table> <script> const row = document.querySelector('#product-table tr'); const productData = JSON.parse(row.dataset.product); console.log(productData.price); // 19.99 </script>

Примечание: Для сложных структур данных используйте JSON в одном data-атрибуте вместо множества простых атрибутов.