在GridView中選擇一行JavaScript的

Question

我幾個問題，在asp.net的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標記內的某處。

然後添加在頁面客戶端腳本如下（我使用jQuery）

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

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

最後，在樣式表定義要爲GridSelectedRow風格。類似下面顯示的代碼。必須使用！important標籤才能確保覆蓋之前的背景顏色設置。

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