На этой странице объясняется несколько способов аннотирования HTML таким способом, но ни один из них не является удовлетворительным.
Тем не менее, они в значительной степени все, что у вас есть. Хотя эта страница не очень хорошая сводка, есть ошибки, и она неправильно понимает, что означает «ненавязчивый» JavaScript.
Например, на самом деле совершенно правильно помещать элемент script внутри тела, но не непосредственно внутри элемента таблицы. Вы можете поместить все фрагменты скрипта внизу таблицы или поместить каждую строку в свою собственную таблицу, или даже с некоторыми ограничениями, если вы собираетесь изменять DOM, внутри рассматриваемой строки.
Установка «id =« comment-123 »», а затем сканирование всех строк с идентификатором, начинающимся с «comment-», действительно подходит для вашего конкретного случая. Для установки неидентифицирующих дополнительных информационных атрибутов вы можете использовать либо HTML5-атрибуты данных, либо взломать его в имени класса, используя, например,. «Class =" comment type-foo data-bar "». Конечно, и идентификаторы, и имена классов имеют свои ограничения относительно того, какие символы вы можете использовать, но возможно закодировать любую строку до допустимых строк. Например, вы можете использовать пользовательскую кодировку в стиле URL, чтобы скрыть не алфавитно-цифровые символы:
<tr class="greeting-Hello_21_20_E2_98_BA">
...
</tr>
function getClassAttr(el, name) {
var prefix= name+'-';
var classes= el.className.split(' ');
for (var i= classes.length; i-->0;) {
if (classes[i].substring(0, prefix.length)==prefix) {
var value= classes[i].substring(prefix.length);
return decodeURIComponent(value.split('_').join('%'));
}
}
return null;
}
var greeting= getClassAttr(tr, 'greeting'); // "Hello! ☺"
Таким способом можно даже хранить сложные нестроковые значения, кодируя их строки JavaScript или JSON, а затем извлекая их с помощью exec (или JSON.parse, где доступно).
Однако, если вы положите туда что-нибудь нетривиальное, это скоро станет грязным. Вот где вы можете предпочесть комментарии. Здесь вы можете поместить что угодно, кроме последовательности '-', которую легко избежать, если она окажется в строке.
<table>
<tr class="comment">
<td>...</td>
<!-- {"id": 123, "user": 456} -->
</tr>
</table>
function getLastComment(node) {
var results= [];
for (var i= node.childNodes.length; i-->0;)
if (node.childNodes[i]==8)
return node.childNodes[i];
return null;
}
var user= getLastComment(tr).user;
Сводка предупреждает, что это не может гарантированно работать, потому что парсеры XML могут отбрасывать комментарии, но тогда парсеры DOM уровня 3 должны сохранять их по умолчанию, и до сих пор это делают все браузеры и основные библиотеки XML.