单击按钮时获得行Gridview

Question

I have a Gridview with the first column containing an edit button for each row. The button on click calls btnEditClick() which is a function in the javascript . How would I be able to access the row on which the button was clicked so that I can edit the values? This is what I have so far,

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

edit here's my 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>
                ...

Answer 1

If your gridview was something like this (html wise):

<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>

Then you could create a function like this:

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

see my jsfiddle: https://jsfiddle.net/fictus/eqtavvwc/

Answer 2

You could use the following function to retrieve the table row:

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

And call it like this:

var row = findParentRow(target);

Answer 3

Use $(this).closest('tr');

Here's a fiddle , it's not gridview but it should be similar to what you need to do

  $(document).ready(function () {

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

Edit, I'm not familer with gridviews honestly, but this should work in principal if you use the right element for closest()