Jquery 如何在ApacheWicket中克隆/创建重复的字段集

我有一个要求，其中有一个用于添加和显示现有注释的字段集。设计是，在上半部分，数据库中的现有注释按行显示，下面是分隔线，后面是带有活动输入字段（日期提示字段、注释文本区域和添加按钮）的行。单击“添加”按钮应在上面的注释列表中添加最新的注释条目，并清除输入字段。 我使用JQuery的克隆方法成功地做到了这一点。然而，我对这种方法并不满意，因为我在这里没有利用wickets的力量。我对这个框架还不熟悉，老实说，我对充分利用这个框架所需的基本知识还不是很熟悉。如果有人能提供一些想法（如果你能给我一些活生生的例子链接、知识来源等）来完成我提到的使用wicket的任务，我将不胜感激

HTML:

<DIV class=row>
    <!-- COMMENTS GRID WIDGET - BEGIN -->
    <DIV class=formField>
        <FIELDSET style="PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 4px; WIDTH: 985px">
            <LEGEND>Comments</LEGEND>
            <DIV id=frmgrid1 style="HEIGHT: 130px">
                <div id="commentgrid">
                    <DIV style="OVERFLOW: auto; HEIGHT: 130px">
                        <TABLE id="tblGridComment" class="tableData" width="955" border="0" >
                            <THEAD>
                            <TR bgColor=#eaeaea>
                                <TD class=tableTitle style="WIDTH: 100px" noWrap>Date</TD>
                                <TD class=tableTitle noWrap>Comment</TD>
                                <TD class=tableTitle style="WIDTH: 100px" noWrap
                                    align=center>Delete</TD>
                            </TR>
                            </THEAD>
                            <TBODY>
                            <TR bgColor="#ffffff" wicket:id="comrow">
                                <TD class="tableData commenttd" vAlign=top>
                                    <A href="#" wicket:id="comdtlink">
                                        <span wicket:id="comdt"> 12/12/12 </span>
                                    </A>
                                </TD>
                                <TD class="tableData commenttd" vAlign="top">
                                    <INPUT  wicket:id="exsistcomment"
                                            style="WIDTH: 750px" maxLength="2000" name="exsistcomment" />
                                </TD>
                                <TD class="tableData commenttd" vAlign=top>
                                    <INPUT type="checkbox" wicket:id="commdelete" name="commdelete"/>
                                </TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </DIV>
                    <HR width=955>
                </div> <!-- comment grid end -->
                <DIV style="TEXT-ALIGN: right; WIDTH: 955px">
                    <SPAN class=row>
                        <SPAN class=formField>
                            <label wicket:id="pdeffdatelabel">Effective Date: </label><BR>
                            <INPUT  wicket:id="pdeffdate" id="pdeffdate" name="pdeffdate" />
                            <!-- <A wicket:id="linkpdeffdate" href="#">
                            <IMG style="VERTICAL-ALIGN: text-bottom; MARGIN-LEFT: 2px"
                            border=0 alt="Select Comment Effective Date" src="cal.gif"
                            width=16 height=19 wicket:id="pdeffdateimg" id="pdeffdateimg">
                            </A> -->
                        </SPAN>
                        <SPAN class=formField>
                            <label wicket:id="pdcommentlabel">Comment: </label><BR>
                            <TEXTAREA   wicket:id="pdcomment" id="pdcomment" cols="94"
                                         name="pdcomment">
                            </TEXTAREA>
                        </SPAN>
                        <SPAN class=formField><BR> 
                            <INPUT id="addcomment"  title="Add Row" class="btnz"
                                   type="button" value=" Add " name="btnAddRowComment">
                        </SPAN>
                    </SPAN>
                </DIV>
            </DIV>
        </FIELDSET>
    </DIV>
</DIV>

根据我在互联网上能找到的任何东西，我似乎可以使用WebMarkupContainer对行进行分组，或者以某种方式克隆它。我不确定这是否可能

谢谢你的帮助。

---

Suvo

使用ListView生成重复的元素

经过下列步骤

---

您好，谢谢您的回复。我已经浏览了ListView的详细信息。我不知道如何使用它在客户端克隆组件。据我所知，在返回请求之前，它需要一个用于呈现的列表。请告诉我这件事。感谢你用JAVA风格思考。创建一个bean类{IModel in case of wicket}来存储现有元素的值。然后使用它来存储值和填充值（渲染）。你能提供一个（工作演示）JSFIDLE吗？

 $("#addcomment").click(function () {
             console.log("djkdk");
             var sourcetr   =   $('[id^="commenttr"]').last();
             var clonetr    =   $(sourcetr).clone();    
             clonetr.insertAfter(sourcetr);
             var clonetrid = clonetr.attr("id"),
             res = "",
             newid = "";
             if(clonetrid != "") {  
                res = clonetrid.substring(9,clonetrid.length);
                newid = clonetrid.substring(0,9);
             }
             clonetr.attr('id',newid);
             clonetr.find('[id^="comdt"] span').text($('#pdeffdate').val());
             $('#pdeffdate').val("");
             clonetr.find('[id^="exsistcomment"]').val($('#pdcomment').val());
             $('#pdcomment').val("");
             clonetr.show();

         });