Атрибут data-* тега <colgroup>
Описание
Атрибуты data-* для тега <colgroup> позволяют хранить дополнительную информацию о группе столбцов таблицы. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в JavaScript для управления поведением таблицы или хранения метаданных.
<table>
<colgroup data-column-type="numeric" data-format="currency" data-currency="USD"></colgroup>
<colgroup data-column-type="text" data-max-length="50"></colgroup>
<tr>
<td>$125.00</td>
<td>Описание товара</td>
</tr>
</table>
Особенности работы:
| Аспект | Описание | Примечание |
|---|---|---|
| Синтаксис | Любое имя после префикса data- |
data-my-attribute="value" |
| Доступ из JavaScript | Через dataset или getAttribute |
Дефисы преобразуются в camelCase |
| CSS-доступ | Через атрибутные селекторы | [data-column-type="numeric"] |
Рекомендации по использованию:
- Используйте для хранения метаданных о столбцах
- Применяйте осмысленные имена атрибутов
- Храните только строковые значения (для сложных данных используйте JSON)
- Сочетайте с классами для комплексного управления
- Документируйте используемые data-атрибуты
Пример с JavaScript:
<script>
// Получение данных из атрибутов
const colgroup = document.querySelector('colgroup');
const columnType = colgroup.dataset.columnType; // "numeric"
const currency = colgroup.dataset.currency; // "USD"
// Динамическое изменение данных
colgroup.dataset.updated = new Date().toISOString();
</script>
Практическое применение:
<table id="data-table">
<colgroup data-editable="true" data-field-type="date"></colgroup>
<colgroup data-editable="false" data-field-type="text"></colgroup>
<tr>
<td>2023-01-15</td>
<td>Неизменяемый текст</td>
</tr>
</table>
<script>
document.querySelectorAll('#data-table td').forEach(cell => {
const colIndex = cell.cellIndex;
const colgroup = cell.closest('table').querySelectorAll('colgroup')[colIndex];
if (colgroup.dataset.editable === 'true') {
cell.contentEditable = true;
cell.addEventListener('blur', validateField);
}
function validateField(e) {
const type = colgroup.dataset.fieldType;
// Валидация по типу поля
}
});
</script>
Доступ через CSS:
<style>
/* Стилизация по data-атрибутам */
colgroup[data-important="true"] {
border-left: 3px solid red;
}
td:first-child::before {
content: attr(data-column-type);
font-size: 0.8em;
color: #666;
}
</style>
Важные замечания:
- Атрибуты чувствительны к регистру
- Значения всегда являются строками (преобразуйте при необходимости)
- Не используйте для хранения чувствительных данных
- Доступны через DOM-интерфейс
dataset - Не влияют на производительность при правильном использовании
Пример хранения сложных данных:
<table>
<colgroup data-column-options='{"type":"number","min":0,"max":100,"step":1}'></colgroup>
<tr>
<td>42</td>
</tr>
</table>
<script>
const options = JSON.parse(
document.querySelector('colgroup').dataset.columnOptions
);
console.log(options.type); // "number"
</script>
Примечание: Атрибуты data-* предоставляют гибкий способ хранения дополнительной информации о группах столбцов, что особенно полезно для динамических таблиц и сложных интерактивных интерфейсов. Они полностью валидны в HTML5 и поддерживаются всеми современными браузерами.