单击按钮时获取行 Gridview答案

【问题标题】：get row when button clicked Gridview单击按钮时获取行 Gridview
【发布时间】：2023-03-17 15:09:02
【问题描述】：

我有一个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);

编辑这是我的网格视图

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

【问题讨论】：

这很容易用 jQuery 完成。我看到您使用的是直接的 JavaScript。你的项目中包含 jQuery 库吗？
不，我没有，这主要是已经编写的代码，我正在尝试添加。这可以只用 javascript 完成还是应该使用 jQuery？

标签： javascript jquery asp.net gridview

【解决方案1】：

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

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

然后这样称呼它：

var row = findParentRow(target);

【讨论】：

【解决方案2】：

如果您的 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/

【讨论】：

onclick="getRowNumber(event); 相当没用，或者至少增加了同谋。请改用onclick="getRowNumber(this); 来避免e.target || e.srcElement 构造。
你完全正确！我这样做只是为了使用@mysticalstick提供的确切代码

【解决方案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，但是如果您使用最接近（）的正确元素，这应该可以正常工作

【讨论】：