Question

我有一个Gridview，第一列包含每行的编辑按钮。点击按钮会调用btnEditClick()，这是javascript中的一项功能。我如何能够访问单击按钮的行，以便我可以编辑值？这是我到目前为止所做的，

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

Answer 1

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

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

Answer 2

您可以使用以下函数检索表格行：

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

并称之为：

var row = findParentRow(target);

Answer 3

使用$（this）.closest（'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]);
            }            
        );
    });

编辑，老实说，我并不熟悉gridviews，但如果你使用最接近的（）

的正确元素，这应该是原则上的。

按钮单击Gridview时获取行

3 个答案: