jQueryを使用してグリッド行をハイライトする最適かつ最適な方法

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オブジェクトが構築されるわけではありません。その後、最初に追加します、

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

それはどこでもhighlightクラスを削除します：

$("#<%= UltraWebGrid1.ClientID%> tr").click(function(event) { 
    // Remove the highlight class from all rows up front 
    $("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight"); 

    $(event.target).addClass("highlight"); 
}); 

Answer 2

が、これは試してみてください：あなたはこのような何かを試みることができる

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"); 
      } 
     } 
    }); 
} 

あるいは、 trは、onclick属性に$("#<%= highlightedRow.ClientID%>")の値を含みます。

ループよりも速くなければなりません。

Answer 3

javascriptの代わりにGridView.SelectedRowStyleプロパティを使用できます。例えば は、宣言の構文を使用します。

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

をあるいはながらプログラムでプロパティを設定し、初期化：

UltraWebGrid1.SelectedRow.CssClass = "highlight"; 

Answer 4

あなたはクラスのハイライトを追加したい場合はいつでもユーザーの表行をクリックして、ときに、ユーザーもう一度同じクラスを削除します同じテーブルの行をクリックすると、その後、ここにコード

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

だそれとも、すべての行からクラスを削除し、一つだけ選択された行に追加したい場合は、あなたのコードは次のようになります。

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

ログイン：For More jQuery Tutorials