如何在 HTML 元素中存储对象引用？

Question

我正在使用从 JSON 文件导入的 javascript 对象构建 HTML 表单。我使用递归算法来构建 HTML 表，以及相应的元素（标签、文本框等）。这些字段加载了当前节点的值。

这个想法是编辑文本框中的值；这又会更新 javascript 对象。进行更改后，编辑器会将 JSON 对象发送到服务器并更新文件。

令人费解的问题是，如何引用已更改的节点？我尝试了几种方法都无济于事。

编辑：

这是我正在做的事情的基本想法：

function build_tree(obj, depth) {
    for (key in obj) {
        if (typeof(obj[key]) == 'object') {
            print(key + "<input type="text" value='" + obj[key] + "'>");
            build_tree(obj[key], depth + 1);
        } else 
            print(key + "<input type="text" value='" + obj[key] + "'>");
}

现在，如何将 obj[key] 的值绑定到文本框，以便在更改值时更新 Javascript 对象？

Answer 1

首先，您需要一种方法来单独识别输入，因此，我将添加一个data-key属性。

function build_tree(obj, depth) {
    for (key in obj) {
        if (typeof(obj[key]) == 'object') {
            print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>");
            build_tree(obj[key], depth + 1);
        } else 
            print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>");
} 

然后，在构建树后，我会将更改事件处理程序附加到每个文本输入。

$('input[type="text"]').on('change',function(){
   var key = $(this).data('key'); 
   obj[key] = $(this).val(); 
}); 

obj将是一个全局数组。希望这是有道理的。