Есть ли способ сохранить объект json в атрибуте default / custom тега HTML, скажем, <tr>

Я хотел бы указать на некоторые вещи здесь.

Во-первых, тот факт, что вы можете хранить строки только по атрибуту data, ничем не ограничивает вас. Я хотел бы запомнить вас, что каждый JSON - это строка, прежде чем вы ее разобрали.

Во-вторых, вы можете создать тег скрипта с типом = 'x-whatever-you-want'. Он не будет интерпретироваться как javascript, и вы можете получить контент позже (как http://handlebarsjs.com/ предлагает на нем главную страницу.)

Наконец, это плохой дизайн. Решение Джозефа Портелли, вероятно, лучше. Просто имейте в виду, что из-за того, как работают замыкания, вы можете легко получить неправильное значение x, если вы немного измените этот код...

Это может быть альтернативный подход к сохранению данных в атрибутах HTML.

Если вы динамически генерируете таблицу с помощью JavaScript, вы можете попробовать что-то вроде этого

// assuming this is your data
var data = [
    {name:'Joe',surname:'Jones'},
    {name:'Zack',surname:'Tailor'}
];


var tbl = document.getElementById('mytable');
for(var x = 0; x < data.length; x++) {
    var row = tbl.insertRow(x);


    (function(rowData){
        row.onclick = function() {
            // 'rowData' will contain data related to the clicked row
            console.log(rowData);
        }
    })(data[x]);
}

Основное преимущество здесь заключается в том, что вы можете привязывать любые данные к каждой строке, включая ссылки на элементы и т.д.

Часть, .data() только сохранение строковых значений, неверна. Ты можешь сделать:

$('body').data('options', {"name":"Bill"});
var options = $('body').data('options');
console.log( options.name );

Я бы лично просто сохранил идентификатор в tr и использовал его для поиска чего-то в массиве вместо дублирования массива в DOM. Вот краткий пример:

var data = {}
data[123] = {"name":"Bill"};
data[458] = {"name":"Ganesh"};

Затем

<tr data-id="458">

Затем, когда вы щелкнете, вы сможете...

$('tr').on('click', function(){
  var id = $(this).data('id'), obj = data[id];
  console.log('You clicked on: ', obj.name);
});