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

jsp中一行多条数据情况的相关文章

Bag标签之删除书包中的一条数据

删除书包中的一条数据 查询 <esql module=help id=list> Select ID,Subject,Writer,DayTime From Messages </esql> 删除前循环输出 <table border=1> <tr><th>ID</th><th>主题</th><th>作者</th><th>时间</th></tr> &l

使用JDBC向数据库中插入一条数据

原谅我是初学者,这个方法写的很烂,以后不会改进,谢谢 /** * 通过JDBC向数据库中插入一条数据 1.Statement 用于执行SQL语句的对象 1.1 通过Connection 的 * createStatement() 方法来获取 1.2 通过executeUpdate(sql) 的方法来执行SQL 1.3 * 传入的SQL可以是INSERT/UPDATE/DELETE,但不能是SELECT * * 2.Connection和Statement使用后一定要记得关闭 需要在finally

向数据库中插入10000条数据

今天,在进行项目测试的时候,想要事先在数据库中插入10000条数据.之前在SQLServer的期末项目中也使用过,但是却也记不清了. DELIMITER $$ --定义结束符为"$$", DROP PROCEDURE IF EXISTS `proc_auto_insertdata`$$ CREATE PROCEDURE `proc_auto_insertdata`() BEGIN DECLARE pid INTEGER DEFAULT 1; WHILE pid <= 10000

MySql 获取数据表中随机一条数据

通过sql语句获取数据表中的随意一条数据 -- rand() 获取0到1之间的随机浮点数 -- ((select max(id) from test) - (select min(id) from test)) * rand() 获取到随机数 -- + (select min(id) from test) 保证id为 最小ID与最大ID之间的数 select * from test where id >= ((select max(id) from test) - (select min(id)

如何随机从数据库表中抽一条数据的SQL语句

NewID() 方法返回一个 GUID,如:EE95A489-B721-4E8A-8171-3CA8CB6AD9E4 在 select 表的时候,再增加一列为 NewID() 就可以了. SQL 语句:select *, NewID() from table 这样每条记录后就会有一个随机的 GUID 值,我们再按这个 GUID 排一下序就可以达到乱序的效果. SQL 语句:select *, NewID() as random from table order by random 我们要想随机取

mysql同时向一个表中插入多条数据问题!!见详细

INSERT INTO `表名` (`字段1`,`字段2`,`字段3`,`字段4`) values ('数组1数据1','数组1数据2','数组1数据3','数组1数据4'), ('数组2数据1','数组2数据2','数组2数据3','数组2数据4'),('数组3数据1','数组3数据2','数组3数据3','数组3数据4');

java 实现每次从list中取5000条数据放入新list

public static <T> List<List<T>> split(List<T> resList, int count) { if (resList == null || count < 1) return null; List<List<T>> ret = new ArrayList<List<T>>(); int size = resList.size(); if (size <= c

TP随机从数据库中获取一条数据

orderRaw('rand()'): /** * 随机获取一条商品信息 * @param [type] $condition * @param [type] $field * @param [type] $limit * @return void */ public function randSkuid($condition, $field, $limit) { $result = $this->where($condition)->field($field)->orderRaw('r

使用JDBC向数据库中插入一条数据(第一次修改版)

增加了一个Tools类,放了一些常用的工具 package com.JDBC.java; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.Statement; import java.util.Properties; /**