如何刪除和撤消使用javascript刪除gridview行？

我有一個gridview，點擊刪除按鈕，我需要刪除行一段時間，並單擊撤消鏈接，我需要重新顯示行。如何刪除和撤消使用javascript刪除gridview行？

我的GridView的代碼如下所示：

<asp:GridView ID="NotificationHistory" runat="server" AllowPaging="True" 
     AutoGenerateColumns="False" DataKeyNames="Id" 
     ShowHeader="False" PagerSettings-Mode="NumericFirstLast" 
     FooterStyle-BorderStyle="None" EnableViewState="False" GridLines="None" > 
     <PagerSettings Mode="NumericFirstLast"></PagerSettings> 
     <Columns> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <img alt="Delete" title="Delete" src="SiteImages/X.gif" 
         onclick="changeImage(this)" /> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText="Name"> 
       <EditItemTemplate> 
        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox> 
       </EditItemTemplate> 
       <ItemTemplate> 
        <asp:Label ID="Label1" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label> 
       </ItemTemplate> 

      </asp:TemplateField> 
      <asp:TemplateField HeaderText="Status"> 
       <EditItemTemplate> 
        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Status") %>'></asp:TextBox> 
       </EditItemTemplate> 
       <ItemTemplate> 
        <asp:Label ID="Label2" runat="server" Text='<%# Bind("Status") %>'></asp:Label> 
       </ItemTemplate> 
       <ItemStyle BorderColor="#F1E8E8" BorderStyle="Solid" BorderWidth="1px" CssClass="gridItemAlignment" /> 
      </asp:TemplateField> 
      <asp:BoundField DataField="Id" HeaderText="ID" Visible="false" /> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:ImageButton ID="ImgDelete" runat="server" Width="16px" Height="16px" CommandName="Remove" 
         ImageUrl="SiteImages/X.gif" ClientIDMode="Static" Enabled="false" /> 
        <asp:HiddenField ID="hFType" runat="server" /> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
     <HeaderStyle Height="10px" BorderColor="Silver" BorderStyle="None" BorderWidth="0" /> 
     <FooterStyle BorderStyle="None"></FooterStyle> 
     <PagerStyle HorizontalAlign="Right" BorderStyle="None" ForeColor="#999999"></PagerStyle> 
     <EmptyDataTemplate> 
      <asp:Label ID="lblHistory" runat="server">No History.</asp:Label> 
     </EmptyDataTemplate> 
    </asp:GridView>

我的HTML：

<table id="ctl00_Content_NotificationHistory" class="home-history-grid" cellspacing="0" border="0" style="border-color: rgb(241, 232, 232); border-style: none; width: 100%; border-collapse: collapse;"> 
<tbody> 
<tr class="home-history-grid-row"> 
<td> 
<img height="16px" width="16px" onclick="changeImage(this)" src="SiteImages/X.gif" title="Delete" alt="Delete"> 
</td> 
<td class="gridItemStyle" style="border: 1px solid rgb(241, 232, 232); width: 75%;"> 
<a href="ReportCreation.aspx?rid=207">Status Report for Kalista as on 05/03/2012</a> 
</td> 
<td class="gridItemAlignment" style="border: 1px solid rgb(241, 232, 232);">Saved</td> 
<td> 
<img id="ImgDelete" height="16px" width="16px" onclick="deleteRow(this)" src="SiteImages/X.gif" alt=""> 
<input id="ctl00_Content_NotificationHistory_ctl02_hFType" type="hidden" value="Cirrus.CirrusObjects.Report" name="ctl00$Content$NotificationHistory$ctl02$hFType"> 
</td> 
</tr> 
<tr class="home-history-grid-row"> 
<td> 
</td> 
<td class="gridItemStyle" style="border: 1px solid rgb(241, 232, 232); width: 75%;"> 
</td> 
<td class="gridItemAlignment" style="border: 1px solid rgb(241, 232, 232);">Saved</td> 
<td> 
</td> 
</tr> 
</tbody> 
</table>

我的JavaScript來刪除行（這是刪除選定的行，現在我想知道我在同一個地方都可以重新顯示出來）：

function deleteRow(imageElement) { 
      var img = $(imageElement); 
      imageElement.setAttribute("id", "selectedRow"); 
      alert($("selectedRow").siblings(":image")); 
      var row = $(imageElement).closest('tr'); 
      $(row).remove(); 
     }

來源

2012-05-04 NewBie

我需要我怎麼能做到這一點的指導。我不知道如何取出行並隱藏它。需要指導。這將有所幫助。 – NewBie

Gridview將e轉換爲html表格，我不知道如何命名行。有沒有什麼辦法可以使用JavaScript獲取相應表格行的索引？ – NewBie

可以粘貼這個GridView生成的html嗎？ – kmb64

改變這個$（行）一個.remove（）來

$(row).hide();它會被隱藏，當你想要顯示它再做$(row).show();

甚至這樣會更有雨衣

$(row).toggle();（幕後將設置顯示=「無」隱藏）

來源

2012-05-04 04:25:05

切換實際上需要點擊網格外的「撤消」鏈接，我怎麼能找到那裏的行？我使用了一個隱藏字段並將該行的值設置爲它。我可以看到[object object]的值。但在提醒$（「hiddenRow」）。val（）時，它是未定義的。 – NewBie

$（「＃hiddenRow」）。val（）嘗試像這樣 –

謝謝Ravi，那是一個問題，我的隱藏字段值也沒有幫助。所以我將所選行的id設置爲一個標誌並且它工作。你的回答幫助我做到了這一點。謝謝。 – NewBie

這將顯示/隱藏的行

$(row).toggle();

來源

2012-05-04 04:30:15 kmb64

你能查看以上評論嗎？ – NewBie

如何刪除和撤消使用javascript刪除gridview行？

回答

相關問題