選択JavaScriptの

Question

私はasp.netでのGridViewでいくつかの問題をしたとのGridViewの行、

<asp:GridView 
    ID="gridAdministrator" 
    runat="server" 
    AllowSorting="true" 
    AutoGenerateColumns="false" 
    AllowPaging="true" 
    OnRowDeleting="gridAdministrator_RowDeleting" > 
    <Columns> 
     <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" /> 
     <asp:BoundField DataField="Name" HeaderText="Name" /> 
     <asp:BoundField DataField="Phone" HeaderText="Phone" /> 
     <asp:BoundField DataField="Address" HeaderText="Address" /> 
     <asp:BoundField DataField="City" HeaderText="City" /> 
     <asp:BoundField DataField="Mail" HeaderText="Mail" /> 
     <asp:BoundField DataField="Password" HeaderText="Password" /> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <a href="#" onclick="ShowPopUpAdmin();">Edit</a> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:CommandField ShowDeleteButton="true" /> 
    </Columns> 
</asp:GridView> 

私は[編集]リンクをクリックし、その表示されます編集AJAXのポップアップパネルが、どのように私はできるようになりましたどの行がクリックされていますか？どんな解決策ですか？私を助けてください。

Answer 1

Idをパラメータとして追加して、ShowPopUpAdmin関数に渡すと、どの行がクリックされているかを知ることができます。

<asp:TemplateField> 
    <ItemTemplate> 
     <a href="#" onclick='ShowPopUpAdmin(Eval("Id"));'>Edit</a> 
    </ItemTemplate> 
</asp:TemplateField> 

Answer 2

の線に沿って何かご質問はここに、あなたはその「行」をしたいと言うとき、あなたは何を意味するかのように非常に明確ではありません、以下を行うには3種類の方法があります：

1. 行
2. のIDをゲット行
3. ハイライト上でマウスオーバー

上の行のインデックス3つの方法は、あなたがしようとしていることをかなり理解することができるはずです。ここで

コードです：

Javascriptを

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() {  
      $(".tbl tr:has(td)").css({ background: "ffffff" }).hover(
       function() { $(this).css({ background: "#C1DAD7" }); }, 
       function() { $(this).css({ background: "#ffffff" }); } 
       ); 
     }); 
</script> 

HTML/ASPX

<asp:GridView 
    ID="gridAdministrator" 
    CssClass="tbl" 
    runat="server" 
    AllowSorting="true" 
    AutoGenerateColumns="false" 
    AllowPaging="true" 
    OnRowDeleting="gridAdministrator_RowDeleting" > 
    <Columns> 
     <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" /> 
     <asp:BoundField DataField="Name" HeaderText="Name" /> 
     <asp:BoundField DataField="Phone" HeaderText="Phone" /> 
     <asp:BoundField DataField="Address" HeaderText="Address" /> 
     <asp:BoundField DataField="City" HeaderText="City" /> 
     <asp:BoundField DataField="Mail" HeaderText="Mail" /> 
     <asp:BoundField DataField="Password" HeaderText="Password" /> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <a href="#" onclick="ShowPopUpAdmin();">Edit</a> 
       <a href="#" onclick="alert('<%# Eval("ID") %>');">Click to show ID</a><br /> 
       <a href="#" onclick="alert('<%# Container.DataItemIndex %>');">Click to show Row Index</a> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:CommandField ShowDeleteButton="true" /> 
    </Columns> 
</asp:GridView> 

Answer 3

私はこの投稿が古いですけど、私ははるかに簡単な解決策を持っています。コントロールを作成する：

<RowStyle CssClass="GridRow" /> 

どこかにasp：GridViewタグ内で作成します。

はその後

$(document).ready(function() { 
    $('.GridRow').click(ChangeSelectedRow); 
}); 

function ChangeSelectedRow(evt) { 
      $('.GridRow').removeClass('GridSelectedRow'); 
      $(this).addClass('GridSelectedRow'); 
} 

（私はjQueryのを使用）ページクライアントスクリプトで次のように追加します。最後に、あなたのスタイルシートにあなたがGridSelectedRowのためにするスタイルを定義します。以下に示すコードのようなもの。 ！importantタグは、以前の背景色の設定をオーバーライドするために必要です。

.GridSelectedRow 
{ 
    background-color: #E0F76F !important; 
}