JavaScript新增输入框
2015-09-14 15:10
453 查看
最近开发实现了那种点击增加按钮就会多出一栏的效果,但是当每栏的输入框的数量比较多的时候,后台参数的接受就是个问题,不过现在问题总算解决了,用List集合去接受页面数组的方式,具体实现如下:
![](http://images.cnitblog.com/i/639124/201406/212249016611735.png)
实现的思路:
首先,要把传递的每栏参数变成每个对象,例如:昵称,用户名,密码就是一个user类的属性;
![](http://common.cnblogs.com/images/copycode.gif)
![](http://common.cnblogs.com/images/copycode.gif)
其次,当首次进入页面的时候默认的都会有一栏输入框,及第一栏;
![](http://common.cnblogs.com/images/copycode.gif)
![](http://common.cnblogs.com/images/copycode.gif)
最后就是jsp页面的展现,代码如下:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
![](http://common.cnblogs.com/images/copycode.gif)
![](http://common.cnblogs.com/images/copycode.gif)
jsp
最近做web开发,页面要用户体验好的话会经常会加些特效,有时候感觉很有难度,不过实现后又觉得很有成就感。所有特地把工作遇到的自己花费了脑力的实现的代码整理了下,用来以后温故知新和给同样有需求的朋友一个参考。
最近开发实现了那种点击增加按钮就会多出一栏的效果,但是当每栏的输入框的数量比较多的时候,后台参数的接受就是个问题,不过现在问题总算解决了,用List集合去接受页面数组的方式,具体实现如下:
![](http://images.cnitblog.com/i/639124/201406/212249016611735.png)
实现的思路:
首先,要把传递的每栏参数变成每个对象,例如:昵称,用户名,密码就是一个user类的属性;
![](http://common.cnblogs.com/images/copycode.gif)
@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()... }
![](http://common.cnblogs.com/images/copycode.gif)
其次,当首次进入页面的时候默认的都会有一栏输入框,及第一栏;
![](http://common.cnblogs.com/images/copycode.gif)
@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()..... }
![](http://common.cnblogs.com/images/copycode.gif)
最后就是jsp页面的展现,代码如下:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
![](http://common.cnblogs.com/images/copycode.gif)
<%@ 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>
![](http://common.cnblogs.com/images/copycode.gif)
jsp
最近做web开发,页面要用户体验好的话会经常会加些特效,有时候感觉很有难度,不过实现后又觉得很有成就感。所有特地把工作遇到的自己花费了脑力的实现的代码整理了下,用来以后温故知新和给同样有需求的朋友一个参考。
相关文章推荐
- JS原生编写飞机大战小蜜蜂游戏
- JS+DIV+CSS实现的经典标签切换效果代码
- JS----简单的倒计时
- json 除去转义字符以及查看json错误
- JSHint 使用说明
- extjs 4.2 按照百分比配置
- JSON 解析器的简单例子
- Javascript动态创建 style 节点
- 淘宝轮播JS
- javascript根据输入的本金实时计算本息和
- JavaScript运算符
- 更深入学习js的一些细节记录(看到哪里先记录到哪)
- JavaScript 库
- 【javascript】arrayBuffer对象的理解
- JS正则表达式验证数字非常全
- 使用 JavaScript 创建Cookie
- AJAX获取json
- js提取整数部分,移除首末空格
- javascript 与 flex 通信
- 神奇的数据建模框架JSONModel