Question

我想实现在html表的命令按钮中单击的行旁边移动一个包含不同元素的面板，如下所示：

jQuery("[id*=lnkButton]").click(function () { 
   $(this).closest('tr').after("<tr class ='alt'><td> appendTo here </td></tr>");
   //$("#source").appendTo("#destination"); how to run this line inside TD and make the panel visible in there upon inserted 
}

这是我要移动到新创建的行的面板：

<asp:Panel ID='panelPhotos' runat='server' Visible="False"> a lot of elements</Panel>

该面板包含服务器控件，例如点击事件链接的按钮......

这是表格（GridView）：

<asp:GridView ID="gridScopeItem" runat="server" AllowPaging="True"  DataKeyNames="ItemID" AutoGenerateColumns="False" OnPageIndexChanging="gridScopeItem_PageIndexChanging" OnRowCommand="gridScopeItem_RowCommand" OnSelectedIndexChanged="gridScopeItem_SelectedIndexChanged"
    PageSize="10" Caption="Scope Items" ClientIDMode="Static">
<Columns>
    <asp:BoundField DataField="ItemID" HeaderText="Item ID"/>
    <asp:BoundField DataField="Cat" HeaderText="CAT" ReadOnly="true"/>
    <asp:BoundField DataField="Sel" HeaderText="SEL" ReadOnly="true"/>
    <asp:BoundField DataField="Activity" HeaderText="ACT" ReadOnly="true"/>
    <asp:BoundField DataField="SpecDetailedDescription" ReadOnly="true" HeaderText="Description" />
    <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton runat="server" ID="Link1" CommandName="detail" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" Text="<img src='img/upload.png' title= 'Upload Pictures' style='max-height: 20px; max-width: 30px;' />" />
        </ItemTemplate>
    </asp:TemplateField>                           
</Columns>

所以当我点击LinkButton时，我需要在现有面板（panelPhotos）中添加新的TR / TD。

Answer 1

https://jsfiddle.net/q8vof2fa/

$("body").on("click", "td", function() {
    $(this).closest("tr").after("<tr><td> appendTo here </td><tr>");
});

这样的东西？单击<td>元素，它会在其父元素后附加<tr>元素。

使用JQuery

1 个答案: