javascript - 编辑显示值时更改 JQuery 数据表中一行的样式

Question

我有一个来自 JQuery 插件的数据表，它显示从数据库中获取的对象。在每一行的末尾都有一个“编辑”按钮，单击该按钮会打开一个弹出窗口，其中包含允许用户更改对象的字段。

下面的代码是打开弹出窗口的“编辑”按钮。

<td>@Ajax.ActionLink("Edit",
                                 "controllerMethodReturningEditView",
                                 new
                                 {
                                     Id = @m.Id
                                 },
                                 new AjaxOptions
                                 {
                                     HttpMethod = "GET",
                                     UpdateTargetId = "popupBox",
                                     InsertionMode = InsertionMode.Replace,
                                     OnSuccess = "openPopup('myPopup')"
                                 })</td>

按下编辑按钮时调用的 Controller 方法只是打开一个部分显示在弹出框中的 View

return PartialView("editObjectView", objectModel);

这个“editObjectView”只包含一个表单，其中包含用于输入的字段。

@using(Html.BeginForm(...
           <label>...</label><input ... />
           .... and so on

然后在此弹出窗口中，允许用户编辑显示对象的值。当用户按下弹出窗口中的“保存”按钮时，新值将被发送到 Controller 方法，该方法将值(对象)保存在数据库中。保存值时， Controller 方法调用加载第一个 View (显示数据表的 View )的 Controller 方法，并且该方法请求数据库中的所有对象以显示新对象或对对象的更改。

现在我的问题是:编辑对象后重新加载页面时，如何更改编辑行的样式？我只想在最近编辑的行周围设置一个红色边框。如果我不必通过用于重新加载页面的所有 Controller 方法发送对象，我会更愿意。

感谢帮助，感激不尽!

Answer 1

不知道返回到页面的内容，也不知道要更新的样式。

假设您想要交替每行 css 类。将内容添加到页面后，您可以执行如下操作:

$("tr:nth-child(odd)", "#YOUR_TABLE_ID").addClass("odd-row");

或者，确保每一行 HTML 都被格式化为一个唯一的 ID 标记“...”，然后在添加到页面后做一些 jQuery 设置类。

如果请求是 Ajax 请求，并且您正在使用 json 返回一些内容 - 例如:

var json { Id = Table.ID, status = true };

然后 OnSuccess 事件会做这样的事情:

function OnSaveSuccess(data) {
    if (data.status) {
        $("#" + data.Id).addClass("highlight-row");
    } else {
    console.warn("save was not successful!");
    }
}