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
时间: 2024-11-02 22:03:58