最近開發實現了那種點擊增加按鈕就會多出一欄的效果，但是當每欄的輸入框的數量比較多的時候，后台參數的接受就是個問題，不過現在問題總算解決了，用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>
最近做web開發，頁面要用戶體驗好的話會經常會加些特效，有時候感覺很有難度，不過實現后又覺得很有成就感。所有特地把工作遇到的自己花費了腦力的實現的代碼整理了下，用來以后溫故知新和給同樣有需求的朋友一個參考。