最近开发实现了那种点击增加按钮就会多出一栏的效果，但是当每栏的输入框的数量比较多的时候，后台参数的接受就是个问题，不过现在问题总算解决了，用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>
jsp
最近做web开发，页面要用户体验好的话会经常会加些特效，有时候感觉很有难度，不过实现后又觉得很有成就感。所有特地把工作遇到的自己花费了脑力的实现的代码整理了下，用来以后温故知新和给同样有需求的朋友一个参考。
页面JS实现按钮点击增加输入框
时间： 2024-10-13 06:06:05