当点击按钮时获得行Gridview

我有一个Gridview与第一列包含每行的编辑按钮。点击按钮呼叫btnEditClick()这是javascript中的一项功能。我如何能够访问按钮被点击的行，以便我可以编辑这些值？这是我到目前为止，这里当点击按钮时获得行Gridview

 var target = event.target || event.srcElement; 
     target.id = "btnEdit"; 
     target.style.display = 'none'; 

     var cancel = document.getElementById("btnCancel"); 
     if (cancel != null) 
      cancel.click(); 

     var grid = document.getElementById("gridRoles"); //get gridview 
     var row = target.parentElement.parentElement; //doesn't work 

     var hdn = document.createElement("input"); 
     hdn.type = "hidden"; 
     hdn.id = "hdnId"; 
     hdn.name = "hdnId"; 
     hdn.value = row.cells[1].innerHTML.toString(); 
     row.cells[0].appendChild(hdn);

编辑是我的GridView

<asp:GridView ID="gridRoles" runat="server" Width="100%" AutoGenerateColumns="False" Font-Names="Arial" PageSize="12" 
      Font-Size="11pt" CssClass="textGrid" AlternatingRowStyle-BackColor="#CED8F6" HeaderStyle-BackColor="#F2F2F2" 
      AllowPaging="True" OnPageIndexChanged ="IndexChanged" OnPageIndexChanging ="PageChange" OnRowDataBound="gridroles_RowDataBound"> 
      <Columns> 
       <asp:TemplateField HeaderText="Action"> 
        <ItemTemplate> 
         <asp:Button ID="btnEdit" runat="server" text="Edit" OnClientClick="btnEditClick()" /> 
         <asp:Button ID="btnAdd" runat="server" text="Add" OnClientClick="btnAddClick()" Visible="false"/> 
        </ItemTemplate> 
       </asp:TemplateField> 
       ...

来源

2016-06-21 mysticalstick

这很容易用jQuery完成。我看到你正在使用直接的JavaScript。你在项目中包含jQuery库吗？ –

不，我没有，这主要是代码已经写好，我试图添加到它。这可以用JavaScript来完成，还是应该使用jQuery？ – mysticalstick

你可以使用下面的函数来检索表行：

function findParentRow(child) { 
    var ctl = child; 
    while (ctl) { 
     if (ctl.tagName === 'TR') { 
      return ctl; 
     } 
     ctl = ctl.parentNode; 
    } 
    return null; 
}

，并调用它是这样的：

var row = findParentRow(target);

来源

2016-06-21 19:40:55 ConnorsFan

如果你的GridView是这样的（HTML明智）：

<table id="gridRoles"> 
<tr> 
    <th> 
    button 
    </th> 
    <th> 
    row 
    </th> 
</tr> 
<tr> 
    <td> 
    <a href="#" onclick="getRowNumber(event);">row Index</a> 
    </td> 
    <td> 
    row 1 
    </td> 
</tr> 
<tr> 
    <td> 
    <a href="#" onclick="getRowNumber(event);">row Index</a> 
    </td> 
    <td> 
    row 2 
    </td> 
</tr> 
<tr> 
    <td> 
    <a href="#" onclick="getRowNumber(event);">row Index</a> 
    </td> 
    <td> 
    row 3 
    </td> 
</tr> 
</table>

，那么你可以创建一个这样的功能：

function getRowNumber(event) { 
     var target = event.target || event.srcElement; 
     target.id = "btnEdit"; 
     target.style.display = 'none'; 

     var cancel = document.getElementById("btnCancel"); 
     if (cancel != null) 
      cancel.click(); 

     //var grid = document.getElementById("gridRoles"); //get gridview 
     var row = target.parentElement.parentElement; 

     var hdn = document.createElement("input"); 
     hdn.type = "hidden"; 
     hdn.id = "hdnId"; 
     hdn.name = "hdnId"; 
     hdn.value = row.cells[1].innerHTML.toString(); 
     row.cells[0].appendChild(hdn); 
}

看到我的jsfiddle：https://jsfiddle.net/fictus/eqtavvwc/

来源

2016-06-21 19:34:38 fictus

'onclick =“getRowNumber（event）;'是无用的，或者至少增加了共谋性，使用'onclick =”getRowNumber（this）;'而不是'e.target || e.srcElement'结构。 –

你是对的！我这样做只是为了使用提供的确切代码@mysticalstick – fictus

使用$（本）。最接近（ 'TR'）;

Here's a fiddle，这不是GridView的，但你需要做的

$(document).ready(function() { 

     $(".btnSave").click(
      function() { 
        var closestTr = $(this).closest('tr'); 
       console.log(closestTr[0]); 
       $('.clickedStuff').append(closestTr[0]); 
      }    
     ); 
    });

编辑它应该是类似的，我不是GridView的familer诚实，但这应该在主要工作，如果你使用正确的元素对于最接近的（）

来源

2016-06-21 19:47:46 user316114

当点击按钮时获得行Gridview

回答

相关问题