當點擊按鈕時獲得行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

回答

相關問題