修改對象后如何更新html中的數據？

Question

我有此功能，通過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);

};

PS我想在同一個地方更新，我的ID應該是相同的。

Answer 1

我對您的原型jsFiddle進行了一些修改，因此它包含一個有效的示例。

我需要修改某些部分才能使其正常工作，例如，更新添加了功能的對象。

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

我猜你應該能夠通過給定的jsFiddle解決它

Answer 2

據我了解，您想在運行“ updateUser”時更新表。 基本上，您可以使用三種方法來更新數據。

1. 重建整行
2. 選擇表中的特定單元格並更改內容
3. 使用兩種方式的數據綁定框架

以我的經驗，最好的解決方案以及如何進行外匯交易。 Backbone做到了，只是在數據更改時重新創建所有HTML。 兩種方式的數據綁定功能甚至更強大，但在這種情況下顯得有些過分。

所以基本上在您的updateUser函數中：

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

現在，這當然需要更改您的“ buildRow”函數，而不是使其附加行，而是將其返回。

希望這能使您更進一步...