修改对象后如何更新html中的数据？答案

【问题标题】：How can i update data in html after modify the object?修改对象后如何更新html中的数据？
【发布时间】：2014-09-19 12:12:49
【问题描述】：

我有这个功能可以通过 ID 修改我现有的对象：

   var updateUser = function () {
    var id = $("#userId").val();
    var user = findObjectById(id);

    user.username = $('#username').val();
    user.level = $('#level').val();
    user.regstatus = $('#regstatus').val();
    user.regdate = $('#regdate').val();



    $(".table").show();
    $("#newUser").show();
    $("#userForm").hide();
    $("#updateUser").hide();

};

如何用修改后的数据替换 HTML 中的当前数据？

这是我创建行的函数：

 var buildRow = function (data) {
    var html = '<tr id = ' + data.id + '>' +
        '<td>' + data.username + '</td>' +
        '<td>' + data.level + '</td>' +
        '<td>' + data.regstatus + '</td>' +
        '<td>' + data.regdate + '</td>' +
        '<td>' +
        '<button class="btn btn-info"value="Edit" onclick="userList.editUser(' + data.id + ')">Edit</button>' + ' ' +
        '<button class="btn btn-danger" value="Delete" onclick="userList.deleteRow(' + data.id + ')">Delete</button>' + '</td>' +
        '</tr>';


    $("#users").append(html);

};

P.S 我想在同一个地方更新，我的 id 应该是一样的。

【问题讨论】：

小提琴会有所帮助。
如果在追加行之前#users 没有任何数据，您可以简单地将.append(html) 替换为.html(html) 并在updateUser() function 中调用buildRow(user)
jsfiddle.net/gjrK4/1 但我从 json 获取数据 :) 所以这就是我的 js 代码的样子:)
看看这个：stackoverflow.com/questions/2160890/… 如有必要，您还可以使用 jQuery 对表格进行排序。 stackoverflow.com/questions/3160277/jquery-table-sort
一个带有工作数据源的 jsFiddle 会很好。

标签： javascript jquery html

【解决方案1】：

据我了解，您希望在运行“updateUser”时更新表。基本上有三种方法可以更新您的案例中的数据。

重建整行
选择表格中的特定单元格并更改内容
使用双向数据绑定框架

根据我的经验，最好的解决方案，以及 f.ex. Backbone 做到了，只是在您的数据更改时重新创建所有 HTML。双向数据绑定功能更强大，但在这种情况下似乎有点过头了。

所以基本上在你的 updateUser 函数中：

var row = buildRow(user);
var $existingRow = $(id);
if ($existingRow.length) {
  $existingRow.replaceWith(row);
} else {
  $('#users').append(row);
}

现在，这当然需要更改您的“buildRow”函数，而不是让它附加行，而是返回它。

希望这能让你走得更远......

【讨论】：

【解决方案2】：

我稍微修改了你的原型 jsFiddle，所以它包含一个工作示例。

我需要修改一些部分以使其工作，例如更新我添加功能的对象。

updateObjectById = function (id, obj){
        for (var i = 0, l = userData.length; i < l; i++) {
           if (userData[i].id == id) {
            userData[i] = obj;
        }
    }
};

我猜你应该可以通过给定的jsFiddle 来解决它

【讨论】：