行事件彈出限制

Question

我做了一個彈出框上顯示點擊行事件並將其顯示在該行的細節，但我不想dispaly上單擊插入/編輯/刪除按鈕盒這是在Gridview中。爲此，我使用了jquery。

這裏是我的代碼

$(function() { 
     var grid = document.getElementById('<%= gvDetails.ClientID%>'); 
     $('tr', grid).on('click', function (obj, b) { 
      if (['Update', 'Edit', 'Add'].indexOf(obj.target.type) == "image") 
       return true; 
      else 
      $("#id").html($(".clsempid", $(this).closest("tr")).html()); 
      $("#name").html($(".clsempid1", $(this).closest("tr")).html()); 
      $("#department").html($(".clsempid2", $(this).closest("tr")).html()); 
      $("#age").html($(".clsempid3", $(this).closest("tr")).html()); 
      $("#sal").html($(".clsempid4", $(this).closest("tr")).html()); 
      $("#dialog").dialog({ 
       title: "View Details", 
       buttons: { 
        Ok: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       modal: true 
      }); 
     }); 
    }); 


<asp:TemplateField HeaderText="Edit/Delete" HeaderStyle-Width="5%"> 
        <EditItemTemplate> 
         <asp:ImageButton ID="imgbtnUpdate" CommandName="Update" runat="server" ImageUrl="~/Images/update.png" ToolTip="Update" Height="20px" Width="20px" /> 
         <asp:ImageButton ID="imgbtnCancel" runat="server" CommandName="Cancel" ImageUrl="~/Images/cancel.png" ToolTip="Cancel" Height="20px" Width="20px" /> 
        </EditItemTemplate> 
        <ItemTemplate> 
         <asp:ImageButton ID="imgbtnEdit" CommandName="Edit" runat="server" ImageUrl="~/Images/Insert.png" ToolTip="Edit" Height="20px" Width="20px" /> 
         <asp:ImageButton ID="imgbtnDelete" CommandName="Delete" Text="Edit" runat="server" ImageUrl="~/Images/delete.png" ToolTip="Delete" Height="10px" Width="10px" /> 
        </ItemTemplate> 
        <FooterTemplate> 
         <asp:ImageButton ID="imgbtnAdd" runat="server" ImageUrl="~/Images/Add.png" CommandName="Add" Width="20px" Height="20px" ToolTip="Add new User" ValidationGroup="validaiton" OnClientClick="GetGridFooterRowvalues()" /> 
        </FooterTemplate> 
       </asp:TemplateField>`<asp:GridView ID="gvDetails" style="background-color:lightgreen;  border-collapse: collapse; 
background-color: lightgreen; 
margin-top: -53px;" DataKeyNames="EmpId,EmpName" runat="server" 

      AutoGenerateColumns="false" HeaderStyle-BackColor="#61A6F8" 
      ShowFooter="true" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="white" 
      CellPadding="10" CellSpacing="0" 
      AllowPaging="true" PageSize="5" 
      OnRowCommand="gvDetails_RowCommand" OnRowUpdating="gvDetails_RowUpdating" 
      OnRowEditing="gvDetails_RowEditing" OnRowCancelingEdit="gvDetails_RowCancelingEdit" 
      OnRowDeleting="gvDetails_RowDeleting" OnPageIndexChanging="OnPaging" 
      OnSelectedIndexChanged="OnSelectedIndexChanged" AllowSorting="True" OnRowDataBound="gvDetails_OnRowDataBound"> 


      <Columns > 


       <asp:TemplateField HeaderText="EmployeeID"> 
        <ItemTemplate> 
         <asp:Label ID="lblempid" runat="server" class="clsempid" 
          Text='<%# Eval("EmpId")%>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
         <asp:TextBox ID="txtempid" onkeypress=" return numeric(event,this);" 
          MaxLength="5" runat="server"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="rfvempid" runat="server" ControlToValidate="txtempid" Text="*" ValidationGroup="validaiton" /> 
        </FooterTemplate> 
       </asp:TemplateField> 



       <asp:TemplateField HeaderText="EmployeeName"> 
        <EditItemTemplate> 
         <asp:TextBox ID="txtempname" runat="server" Text='<%#Eval("EmpName") %>' /> 
        </EditItemTemplate> 
        <ItemTemplate> 
         <asp:Label ID="lblempname" runat="server" class="clsempid1" Text='<%#Eval("EmpName") %>' /> 
        </ItemTemplate> 
        <FooterTemplate> 
         <asp:TextBox ID="txtempname1" runat="server" AutoPostBack="false" onkeypress=" return onlyAlphabets(event,this);" /> 
         <asp:RequiredFieldValidator ID="rfvempname" runat="server" ControlToValidate="txtempname1" Text="*" ValidationGroup="validaiton" /> 
        </FooterTemplate> 
       </asp:TemplateField> 


       <asp:TemplateField HeaderText="Department"> 
        <EditItemTemplate> 
         <asp:TextBox ID="txtdep" runat="server" Text='<%#Eval("Dep") %>' /> 
        </EditItemTemplate> 
        <ItemTemplate> 
         <asp:Label ID="lbldep" runat="server" class="clsempid2" Text='<%#Eval("Dep") %>' /> 
        </ItemTemplate> 
        <FooterTemplate> 
         <asp:TextBox ID="txtdep1" runat="server" /> 
         <asp:RequiredFieldValidator ID="rfvdep" runat="server" ControlToValidate="txtdep1" Text="*" ValidationGroup="validaiton" /> 
        </FooterTemplate> 
       </asp:TemplateField> 


       <asp:TemplateField HeaderText="Age"> 
        <HeaderTemplate> 
         Age 
         <br></br> 



        </HeaderTemplate> 

        <EditItemTemplate> 
         <asp:TextBox ID="txtage" runat="server" Text='<%#Eval("Age") %>' /> 
        </EditItemTemplate> 
        <ItemTemplate> 
         <asp:Label ID="lblage" runat="server" class="clsempid3" Text='<%#Eval("Age") %>' /> 
        </ItemTemplate> 
        <FooterTemplate> 
         <asp:TextBox ID="txtage1" runat="server" MaxLength="3" onkeypress=" return numeric(event,this);" ErrorMessage="*" ControlToValidate="txtage1" onchange="handleChange(this);" /> 
         <asp:RequiredFieldValidator ID="rfvage" runat="server" ControlToValidate="txtage1" ErrorMessage="*" ValidationGroup="validaiton" /> 

         </EditItemTemplate> 
        </FooterTemplate> 
       </asp:TemplateField>` 

Answer 1

有你試圖把之間{}代碼。

var grid = document.getElementById('<%= gvDetails.ClientID%>'); 
    $('tr', grid).on('click', function (obj, b) { 
     if (['Update', 'Edit', 'Add'].indexOf(obj.target.type) == "image"){ 
      return true; 
     }else{ 
      $("#id").html($(".clsempid", $(this).closest("tr")).html()); 
      $("#name").html($(".clsempid1", $(this).closest("tr")).html()); 
      $("#department").html($(".clsempid2", $(this).closest("tr")).html()); 
      $("#age").html($(".clsempid3", $(this).closest("tr")).html()); 
      $("#sal").html($(".clsempid4", $(this).closest("tr")).html()); 
      $("#dialog").dialog({ 
       title: "View Details", 
       buttons: { 
        Ok: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       modal: true 
      }); 
     } 
    }); 
});