Question

我有一个表，它将带有值的5个输入文本的表单发送给servlet。在servlet中，我获取值并将它们设置为bean类，并将我设置为bean类的总和作为sum。然后我在jsp表上得到值和总和。问题是，现在我正在创建一个按钮当我点击时，我在最后一行之后插入一行，我想保留这些值和总和，我该怎么办？

这是我将表单发送给Servlet的jsp：Test.jsp

<jsp:useBean id="helloBean" scope="request" class="user.HelloBean" />
<form method="post" action="Servlet">
    <table id= "sum_table">
        <tr>
            <td>Test</td>
            <td>Total</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>   
        <tr>
            <td><input type="text" value="Test1" maxlength=25></td>
            <td><input type="text" value="${helloBean.sum}" maxlength=3 readonly="readonly"></td>
            <c:forEach items="${helloBean.values}" var="item">
                <td><input type="text" id="val" name="values" value="${item}" maxlength=2/></td>
            </c:forEach>
        </tr>
    </table>

    <p><input type="submit"/></p>
    <input type="button" id="btnAdd" value="+"/>
</form>

现在我获得了servlet上的值，计算总和并将它们发送到java bean：Servlet.java

HelloBean hello  = new HelloBean();
String[] values = request.getParameterValues("values");

if (values == null) {
    values = new String[5];

    for(int i = 0; i < 5; i++) {
        values[i]= "0";
    }
}

Integer sum = 0;

for (int i = 0; i < values.length; i++) {
    hello.setSum(sum = sum + Integer.valueOf(values[i]));
    hello.setValues(values);
}   

request.setAttribute("helloBean", hello);
request.getRequestDispatcher("/Test.jsp").forward(request, response);

这是我的Bean类：HelloBean.java

public class HelloBean {
    String[] values;
    Integer sum;

    public Integer getSuma() {return sum;}
    public void setSum(Integer integer) {this.sum = integer;}
    public String[] getValues() {return values;}
    public void setValues(String[] val) {this.values = val;}
}

这就是我添加新行的方式：

$("#btnAdd").click(function () {
    var row = $("#sum_table tbody > tr:last"),
        newRow = row.clone(true);
    newRow.find("input").each(function () {
        var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
        this.id = this.id.replace(/\d+$/, "") + num;
        this.name = this.id;
    });
    newRow.insertAfter(row);
    return false;
});

提前谢谢你！

Answer 1

只需检查JSP页面中sum的值，并根据其值添加新行。

伪代码：

 if sum is not null then
     add a new row in JSP

首次加载页面时，sum的值将为null，当servlet重定向时，会填充值，而sum将不会是null，在JSP页面中自动创建一个新行。

应该是这样的，请记住integer overflow problem。

int sum=0;
for (int i = 0; i < values.length; i++) {
    sum = sum + Integer.valueOf(values[i]);
}
hello.setValues(values);
hello.setSum(sum);

它应该在JSP中看起来像：

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <tr>
        <td><input type="text" value="Test1" maxlength="25"/></td>
        <c:forEach items="${helloBean.values}" var="item">
            <td><input type="text" name="values" value="${item}" maxlength="2"/></td>
        </c:forEach>
    </tr>
    <c:if test="${helloBean.sum != null}">
        <tr>
          <td><input type="text" value="${helloBean.sum}" maxlength="3" readonly="readonly"/></td>
        </tr>
    </c:if>

有些观点：

ID在整个页面中必须是唯一的。在循环中使用相同的标识input创建多个val组件。
在每个标记的属性值周围使用双引号。这是错字吗？
属性sum在类型user.HelloBean上无法读取，因为类中没有getSum()方法。

Answer 2

不需要Bean类

您可以为输入添加keyup事件

<form method="post" action="Servlet">
<table id= "sum_table">
    <tr>
        <td>Test</td>
        <td>Total</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>   
    <tr>
        <td class="test"><input type="text" name="test" value="Test1" maxlength=25></td>
        <td class="sum"><input type="text" name="sum" value="" maxlength=3 readonly="readonly"></td>
        <td><input type="text" name="mark1" value="" maxlength=2 ></td>
        <td><input type="text" name="mark2" value="" maxlength=2 ></td>
        <td><input type="text" name="mark3" value="" maxlength=2 ></td>
        <td><input type="text" name="mark4" value="" maxlength=2 ></td>
        <td><input type="text" name="mark5" value="" maxlength=2 ></td>           

    </tr>
</table>

<p><input type="button" id="btnSubmit" value="Submit"/></p>
<input type="button" id="btnAdd" value="+"/>

        <script>
        $("#btnAdd").click(function () {
            var row = $("#sum_table tbody > tr:last"),
                newRow = row.clone(true);
            newRow.find("input").each(function () {
                var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
                this.id = this.id.replace(/\d+$/, "") + num;
                this.name = this.id;
            });
            newRow.insertAfter(row);
            return false;
        });

        $("#btnSubmit").click(function () {
            $("#sum_table tbody tr").each(function() {
                var row_total = 0; 
                $("td:not('.test'), td:not('.sum') input:text",this).each(function() {
                    var val =$.trim($(this).val());  
                    //console.log('val='+val);
                    if(val!="" && !isNaN(val))
                   row_total += Number(val);
                }); 
                console.log('row_total='+row_total);
                $(".sum :input:text",this).val(row_total);
            });
        });

    </script>

------------------- SERVLET --------------

 String[] test = request.getParameterValues("test");
 String[] sum = request.getParameterValues("sum");

Answer 3

你可以这样做而不使用javascript添加新行，如果它可以帮助你。

1） - 为添加按钮添加名称

<input type="button" id="btnAdd" ***name="addrow"*** value="+"/>

2） - 在Servlet端检查是否单击了添加按钮

if (request.getParameter("addrow") != null){
  request.setAttribute("addRow","yes");
}

3） - 在Jsp方面添加你的for循环

<c:if test="${not empty request.addRow}">
   <td><input type="text" id="val" name="values" value="" maxlength=2/></td>
</c:if>

每当您点击按钮时，这将添加新的emty文本字段。注意：我没有测试此代码。

Answer 4

只需用输入代码替换我添加了“values []”而不是“values”

您可以将它用作数组并将键设置到其中

<input type="text" id="val" name="values[]" value="${item}" maxlength=2/>

动态使用Java bean和Servlet值

4 个答案:

伪代码：

您可以为输入添加keyup事件