页面JS实现按钮点击增加输入框

浏览数：49 / 时间：2015年06月09日

　　最近开发实现了那种点击增加按钮就会多出一栏的效果，但是当每栏的输入框的数量比较多的时候，后台参数的接受就是个问题，不过现在问题总算解决了，用List集合去接受页面数组的方式，具体实现如下：

　　实现的思路：

　　首先，要把传递的每栏参数变成每个对象，例如：昵称，用户名，密码就是一个user类的属性；

@Entity
public class User {
    @Id
    @GenericGenerator(name = "generator", strategy = "increment")
    @GeneratedValue(generator = "generator")
    private Integer id;
    private String nikeName;
    private String username;
    private String password;
       
       //get() set()...
        
}

　　其次，当首次进入页面的时候默认的都会有一栏输入框，及第一栏；

@Controller
@Scope("prototype")
public class AllTestAction extends ActionSupport{
    //此方法是输入页面提交，接受参数的方法list<user> param 
    //可以直接接受页面传递过来的param数组
    List<User> param = new ArrayList<User>();
    public String testAddEnd() {
        User user = new User();
        list =param;
        return "testAddEnd";
    }
    List<User> list = new ArrayList<User>();
    //由此方法进入输入页面，默认有一栏空输入框，
    public String testAddStart() {
        User user = new User();
        list.add(user); //list中加入没有赋值的user对象，为了形成空的输入栏
        return "testAddStart";
    }
     //get() set().....  
}

　　最后就是jsp页面的展现，代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
    #addtest{
        border:1px #33CC00 solid;
        margin:auto;
    }
    #test{
        width:160px;
        border:1px #ffffff solid;
        position:relative;
        left:40%;
        
    }
    td{
        text-align:center;
    }
</style>
<script type="text/javascript" src="plugin/dwz/js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
    var index = 1;
    function add() {
        var addstep = index + 1;
        $("#addtest tr:last").after("<tr>" + 
                "<td>"+ addstep +"</td>" + 
                "<td>" + 
                    "<input type=‘text‘ name=‘param[" + index + "].nikeName‘ >" +
                "</td>" + 
                "<td>"+
                    "<input type=‘text‘ name=‘param[" + index + "].username‘ >"+
                "</td>"+
                "<td>"+
                    "<input type=‘text‘ name=‘param[" + index + "].password‘ >"+
                "</td>"+
            "</tr>");
        index += 1;
    }
</script>
<title>Insert title here</title>
</head>
<body>
    <form action="allTestAction!testAddEnd" method="post">
        <table id="addtest">
            <tr>
                <td>编号</td>
                <td>昵称</td>
                <td>用户名</td>
                <td>密码</td>
            </tr>
            <c:forEach items="${list}" var="user" varStatus="ind">
            <tr>
                <td>${ind.index + 1}</td>
                <td>
                    <input type="text" name="param[${ind.index}].nikeName" value="${user.nikeName }">
                </td>
                <td>
                    <input type="text" name="param[${ind.index}].username" value="${user.username}">
                </td>
                <td>
                    <input type="text" name="param[${ind.index}].password" value="${user.password }">
                </td>
            </tr>
            </c:forEach>
        </table>
            <div id="test">
            <input type="button" value="增加栏位" onclick="add()">
            <input type="submit" value="提交">
            </div>        
    </form>
</body>
</html>