使用 JQuery 突出显示 MvcContrib 网格中的选定行

Question

我是 MVC 和 jQuery 的新手。我有一个 MvcContrib 网格。我有一个选择链接，可以选择要带入数据的行，所以我已经有了该点击的功能。我可以将选定的行突出显示添加到同一功能吗？这是我的代码的外观。

@Html.Grid(Model).Columns(column =>
{
  column.Custom(@<a href='#@item.ID' onclick='getContactDetails(@item.ID); 
  return false;'>Select</a>);
  column.For(x => Html.ActionLink("Edit", "Edit", "Contact", new { id = x.ID, 
  socialcommunityid = x.SocialCommunityID },new { @class = "openDialog", data_dialog_id 
  = "editContactDialog", data_dialog_title = "Contact Details" }) 
  ).Named("").Sortable(false);
})


//This is the function that is already present
function getContactDetails(communityContactID)
{
  //Some code to fetch data
}

有人可以帮我突出显示选定的行吗？

Answer 1

您可以创建一个包含所需样式的新 css 类。将此类添加到单击处理程序内的当前行。将另一个参数this 传递给getContactDetails，这将帮助我们获取相应的行。试试这个。

CSS

.selected{
    background: "someColor";
}

Js

function getContactDetails(communityContactID, obj)
{
    //This will remove selected class from previous selection
    $(this).closest('table').find('tr').removeClass('selected');

    //This will add the selected class to current row
    $(this).closest('tr').addClass('selected');

    //Some code to fetch data
}