编辑显示的值时，更改JQuery数据表中某行的样式

Change style on a row in JQuery Datatables when editing displayed values

本文关键字：数据表 样式 JQuery 更改 显示 编辑      更新时间：2023-09-26

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

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

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

按下编辑按钮时调用的控制器方法只打开弹出框中显示的部分视图

return PartialView("editObjectView", objectModel);

而这个"editObjectView"只包含一个带有用于接受输入的字段的表单。

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

然后，在此弹出窗口中，允许用户编辑所显示对象的值。当用户按下弹出窗口中的"保存"按钮时，新值将被发送到控制器方法，该方法将值（保存到对象）保存在数据库中。保存值时，控制器方法调用加载第一个视图（显示数据表的视图）的控制器方法，该方法从数据库中请求所有对象，以便显示新对象或对对象的更改。

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

谢谢你的帮助，谢谢！

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

假设您希望交替使用每行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!");
    }
}
相关文章：