如何使用javascript删除和撤消删除gridview行？答案

【问题标题】：How to remove and undo remove a gridview row using javascript?如何使用javascript删除和撤消删除gridview行？
【发布时间】：2012-05-04 03:59:48
【问题描述】：

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

【问题讨论】：

我需要有关如何做到这一点的指导。我不知道如何获取该行并将其隐藏。需要指导。那会很有帮助。
Gridview 将转换为 html 表，我不知道如何命名行。有没有办法使用javascript获取相应表行的索引？
你能粘贴这个GridView生成的html吗？
@nz_karl ，请找到更新后的问题。

标签： javascript jquery asp.net gridview

【解决方案1】：

这将显示/隐藏行

$(row).toggle();

【讨论】：

你能看看上面的评论吗？

【解决方案2】：

将此 $(row).remove() 更改为

$(row).hide();它会被隐藏，当你想再次显示它时请$(row).show();

甚至这样会更流畅

$(row).toggle();（在幕后它将设置 display='none' 隐藏）

【讨论】：

切换实际上需要在单击网格外的“撤消”链接时发生，我怎样才能得到该行？我使用了一个隐藏字段并将行的值设置为它。我可以将值视为 [object object]。但是在提醒 $("hiddenRow").val() 时，它是未定义的。
$("#hiddenRow").val() 试试这样
谢谢拉维，这是一个问题，我的隐藏字段值也没有帮助。所以我将所选行的 id 设置为标志并且它起作用了。你的回答帮助我做到了。谢谢。