jsp中一行多条数据情况

1.实现效果：点击新增会在之前文本框后一直新增文本框并且保留新增的图片
效果图：

2.jsp代码：

<table class="Business_Table">
        <tr>
            <td class="TableLabel_Left TableLabel_Tip">
                <span style="float:left" class="bold">附着高度</span>
            </td>
        </tr>
    </table>
    <div style="display: none" id="fzgdTableTbodyTemp"><!--主要是为了po对象字段及显示字段问题 -->
        <ww:hidden name="fzgdList[].id" id="fzgdList[]_id" />
        <ww:hidden name="fzgdList[].wxyqkid" id="fzgdList[]_wxyqkid" />
        <ww:hidden name="fzgdList[].lsbz" id="fzgdList[]_lsbz" />
        <ww:hidden name="fzgdList[].gcid" id="fzgdList[]_gcid"/>
        <ww:hidden name="fzgdList[].gccode" id="fzgdList[]_gccode"/>
        <ww:hidden name="fzgdList[].cjsj" id="fzgdList[]_cjsj"/>
        <div style="display: none"><ww:checkbox name="RP_VISIBLE"  theme="simple" /></div>
        <div style="background-color: #00bfff;" style="width: 100%;text-align:center;">第()道</div>
        <div>
            <ww:textfield name="fzgdList[].fzgd" id="fzgdList[]_fzgd" theme="simple"
                          subNum="2" precision="2" validType="length[1,6]"    cssClass="txtBox easyui-numberbox" />
        </div>
    </div>
    <div style="display: none" id="fzgdTableTbodyImg"><!--主要是为了图片的问题 -->
        <td class="Page_TableText_Center"  style="width: 20%"  onmousemove="this.bgColor='yellow'" onmouseout="this.bgColor='#FFFFFF'">
            <img src="/skin/silver/images/add.gif" alt="" onclick="addFzgd('fzgdTableTbody')"/>
            <div style="display: none"><ww:checkbox name="RP_VISIBLE"  theme="simple" /></div>
        </td>
    </div>
    <table class="Page_Table_Common div_page_margin">
        <ww:if test="fzgdList != null">
            <tbody id="fzgdTableTbody">
            <ww:iterator value="fzgdList" status="rowstatus" id="it"><!-- 因为一行显示5条数据，判断是否新增tr-->
                <ww:if test="#rowstatus.index%5==0">
                    <tr style="height: 55px;">
                </ww:if>
                <td class="Page_TableText_Center" onmousemove="this.bgColor='yellow'" onmouseout="this.bgColor='#FFFFFF'"
                    style="width: 20%;" >
                    <ww:hidden name="fzgdList[${rowstatus.index}].id" id="fzgdList[${rowstatus.index}]_id" />
                    <ww:hidden name="fzgdList[${rowstatus.index}].wxyqkid" id="fzgdList[${rowstatus.index}]_wxyqkid" />
                    <ww:hidden name="fzgdList[${rowstatus.index}].lsbz" id="fzgdList[${rowstatus.index}]_lsbz" />
                    <ww:hidden name="fzgdList[${rowstatus.index}].gcid" id="fzgdList[${rowstatus.index}]_gcid"/>
                    <ww:hidden name="fzgdList[${rowstatus.index}].gccode" id="fzgdList[${rowstatus.index}]_gccode"/>
                    <ww:hidden name="fzgdList[${rowstatus.index}].cjsj" id="fzgdList[${rowstatus.index}]_cjsj"/>
                    <div style="display: none"><ww:checkbox name="RP_VISIBLE"  theme="simple" /></div>
                    <div style="background-color: #00bfff;" style="width: 100%;text-align:center;">第(${rowstatus.index+1})道</div>
                    <div>
                        <ww:textfield name="fzgdList[${rowstatus.index}].fzgd" id="fzgdList[${rowstatus.index}]_fzgd" theme="simple"
                                      subNum="2" precision="2" validType="length[1,6]"    cssClass="txtBox easyui-numberbox" />
                    </div>
                </td>
                <ww:if test="#rowstatus.last">
                    <ww:if test="#rowstatus.count%5 != 0">
                            <td class="Page_TableText_Center"  style="width: 20%"
                                onmousemove="this.bgColor='yellow'" onmouseout="this.bgColor='#FFFFFF'">
                                    <img src="/skin/silver/images/add.gif" alt="" onclick="addFzgd('fzgdTableTbody')"/>
                                    <div style="display: none"><ww:checkbox name="RP_VISIBLE"  theme="simple" /></div>
                            </td>
                        </tr>
                    </ww:if>
                    <ww:else>
                        </tr>
                        <tr style="height: 45px" >
                            <td class="Page_TableText_Center"  style="width: 20%"  onmousemove="this.bgColor='yellow'" onmouseout="this.bgColor='#FFFFFF'">
                                <img src="/skin/silver/images/add.gif" alt="" onclick="addFzgd('fzgdTableTbody')"/>
                                <div style="display: none"><ww:checkbox name="RP_VISIBLE"  theme="simple" /></div>
                            </td>
                        </tr>
                    </ww:else>
                </ww:if>
                <ww:elseif test="#rowstatus.count%5 == 0 && #rowstatus.index != 0">
                    </tr>
                </ww:elseif>
            </ww:iterator>
            </tbody>
        </ww:if>
    </table>

 

3.js增加方法：

function addFzgd(tbodyid){
        var checkls = document.getElementsByName("RP_VISIBLE").length-2;//标示当前所含有的td个数
        var _copy = $("#" + tbodyid + "Temp").html();   //需要添加的html
        var addHtml = $("#" + tbodyid + "Img").html();
        var imgHtml = $("#" + tbodyid+" tr:last-child td:last-child").html();  //获取最后一行的最后一个td
        if(checkls%5 == 0){ //此时表示如果添加则到下一行
            $("#" + tbodyid).html($("#" + tbodyid).html().replace(imgHtml,_copy));
            $("#" + tbodyid).append("<tr style='height: 55px'>"+addHtml+"</tr>");
        }  else{  //在本行添加
            $("#" + tbodyid).html($("#" + tbodyid).html().replace(imgHtml,_copy));//将添加图片替换，然后新增一行
            $("#" + tbodyid+" tr:last-child").append(addHtml);
        }
        //重置对象List下标
        var listName = "";
        if (tbodyid.indexOf("fzgd") != -1) {
            listName = "fzgdList";
        }
        $("#" + tbodyid + " tr td").each(function (i) {
            $(this).find("input,div").each(function () {
                var fieldname = $(this).attr("name");
                if (fieldname != undefined) {
                    fieldname = fieldname.split("].")[1]
                    $(this).attr("name", listName + "[" + i + "]." + fieldname);
                    $(this).attr("id", listName + "[" + i + "]_" +fieldname);
                } else{
                    if($(this).text().indexOf("第(") != -1){
                        $(this).text("第("+(i+1)+")道");
                    }
                }
            });
        });
    }

4.需要做的配置:在XxxAction的同级目录下新建XxxAction-conversion.properties,文件内容为

Element_fzgdList=com.xx.xx.xx.xx.po.TpzFzgd
CreateIfNull_fzgdList=true