如何在修改对象后更新html中的数据

How can i update data in html after modify the object?

本文关键字：html 数据 更新 修改 对象      更新时间：2023-09-26

我有这样一个函数，通过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应该是相同的

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

我需要修改一些部分来让它工作，例如更新我添加了一个函数的对象。

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

你应该能算出来，通过给定的jsFiddle

据我所知，你想在运行"updateUser"时更新表。在您的案例中，基本上有三种更新数据的方法。

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

在我的经验，最好的解决方案，以及如何f.ex。Backbone就是这样做的，它只是在数据改变时重新创建所有的HTML。双向数据绑定更强大，但在这种情况下似乎有些矫枉过正。

updateUser函数中:

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

现在，这当然需要更改您的"buildRow"函数，不是使其附加行，而是返回行。

相关文章：