Question

我有一个网格，我使用下面的jQuery代码来突出显示用户选择的行。

但是要花一些时间来选择这一行我该如何优化呢？

function hightlightrow() {
  var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
  $("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
    if ($(this).attr('onclick')) {
      if ($(this).attr('onclick').indexOf(index) > 0) {
        $(this).addClass("highlight");
      } else {
        $(this).removeClass("highlight");
      }
    }
  });

Answer 1

您可以通过将$（this）的结果存储到局部变量中来略微优化。这样，每次都不会构建一个新的jquery对象。

OSX

或者，您可以尝试这样的事情：

function hightlightrow() {
    var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
    $("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
        var $row = $(this);
        if ($row.attr('onclick')) {
            if ($row.attr('onclick').indexOf(index) > 0) {
                $row.addClass("highlight");
            } else {
                $row.removeClass("highlight");
            }
        }
    });
}

Answer 2

试试这个：

function hightlightrow() {
  $("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight");
  $("#<%= UltraWebGrid1.ClientID%> tr[onclick*='" + $("#<%= highlightedRow.ClientID%>").val() + "']").first().addClass("highlight");
}

它会在任何地方删除highlight类，然后将其添加到第一个 tr，其$("#<%= highlightedRow.ClientID%>")中包含onclick值属性。

它应该比循环更快。

Answer 3

您可以使用GridView.SelectedRowStyle属性而不是javascript。例如，使用声明性语法：

<asp:GridView runat="server" ID="UltraWebGrid1">
   <!-- ... -->
   <SelectedRowStyle CssClass="highlight" />
   <!-- ... -->
</asp:GridView>

或者在初始化时以编程方式设置属性：

UltraWebGrid1.SelectedRow.CssClass = "highlight";

Answer 4

如果你想在用户点击Table Row时添加类高亮显示，当用户再次单击同一个表行时删除同一个类，那么这里是代码

 $("YourGridviewControl").on('click', 'tr', function () {
         $(this).toggleClass("highlight");
  });

或者如果要从所有行中删除Class并仅在一个选定的行上添加，那么您的代码就是这样。

$("YourGridviewControl").on('click', 'tr', function () {
         $("YourGridviewControl tr").removeClass("highlight");
         $(this).addClass("highlight");
 });

访问： For More jQuery Tutorials

使用jQuery突出显示网格行的最佳和最优化的方法

4 个答案: