Question

我正在获取JSON响应中的对象列表，我正在使用javascript函数创建动态表行。表不会显示每条记录的所有值，只显示几列。当用户选择表中的记录时，我不想让服务器跳转以从数据库获取该记录的所有属性，因此我在获取要在表中显示的记录时最初获取所有数据。现在单击一行我想获取此对象并在表格下方的表单中显示每个属性。

我的问题是如何将每个记录对象存储/绑定到相应的<tr>标记并在click事件上检索它，因为HTML允许仅将String值分配给标记属性。 HTML5允许带有“data-”前缀的自定义属性，我们可以使用$("idOfTag").data("atrribute_name_after_data-");访问它们，但这些属性也只接受String值。

我知道这可能不是最有效的方式，因为还有其他一些解决方案 1.将记录对象存储在数组中并仅为相应的标记分配索引，因此在检索时我们从事件源获取索引并从数组中获取相应的对象。 2.使用jqGrid根据JSON响应动态创建表/网格。

Answer 1

仅存储字符串值的.data()部分不正确。你可以这样做：

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

我个人只会在tr上存储一个id，并使用它来查找数组中的某些内容，而不是在整个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);
});

Answer 2

这可能是在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]);
}

这里的主要优点是你可以将任何类型的数据绑定到每一行，包括对元素的引用等。

Answer 3

我想在这里指出一些事情。

首先，您只能在数据属性上存储字符串这一事实并不会限制您的任何内容。在你解析它之前，我想记住你每个JSON都是一个字符串。

其次，您可以使用type ='x-whatever-you-want'创建脚本标记。它不会被解释为javascript，您可以稍后获取内容（如http://handlebarsjs.com/在其主页上所示。）

最后，这是一个糟糕的设计。 Joseph Portelli的解决方案可能更好。请注意，由于闭包的工作方式，如果稍微更改一下代码，您可能很容易得到错误的x值...

有没有办法将json对象存储在HTML标记的default / custom属性中

3 个答案: