页面JS实现按钮点击增加输入框
最近开发实现了那种点击增加按钮就会多出一栏的效果,但是当每栏的输入框的数量比较多的时候,后台参数的接受就是个问题,不过现在问题总算解决了,用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开发,页面要用户体验好的话会经常会加些特效,有时候感觉很有难度,不过实现后又觉得很有成就感。所有特地把工作遇到的自己花费了脑力的实现的代码整理了下,用来以后温故知新和给同样有需求的朋友一个参考。
转载于:https://www.cnblogs.com/homeOfJain/p/3801651.html
页面JS实现按钮点击增加输入框相关推荐
- 模拟JS触发按钮点击功能
模拟JS触发按钮点击功能 Html代码 <html> <head> <title>usually function</title> </hea ...
- js实现按钮点击变色,其他的按钮恢复默认颜色
JavaScript实现按钮点击变色,其他的按钮恢复默认颜色,则需通过循环实现,当有按钮点击的时候,先将所有的按钮的颜色,更改为空,然后在针对,鼠标点击的相应的按钮,进行更改按钮颜色: onclick ...
- HQChart实战教程46-十字光标右侧按钮点击增加刻度线
HQChart实战教程46-十字光标右侧按钮点击增加刻度线 功能介绍 启动十字光标按钮 注册按钮监听事件 点击回调函数 交流QQ群: 950092318 HQChart代码地址 完整的例子代码 功能介 ...
- php模拟js点击按钮,JS模拟按钮点击功能的方法
本文实例讲述了JS模拟按钮点击功能的方法.分享给大家供大家参考,具体如下: usually function function load(){ //下面两种方法效果是一样的 document.getE ...
- Angular.js 页面里的按钮点击事件处理
假设我有一个Angular页面,上面绘制了一个按钮: <div class="fd-form__set"><div class="fd-form__it ...
- Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
方法一:使用document对象查找所有的按钮 //按照dom的方式添加事件处理function BindByDom() {try{var htmlBtns = document.getElement ...
- html页面多个按钮点击事件监听事件,HTML Button.onclick 事件汇总
type="button" value="打开" name="Button1"> type="button" va ...
- 关于利用js创建按钮点击事件获取input值的问题
点击按钮后无任何反应,可能的一种原因是js中对input的name属性错误使用单双引号. 错误写法: 注意name="get_email" function bi ...
- java js id的点击事件_JavaScript中点击事件的写法
click var btn=document.getElementById('btn'); 第一种: btn.οnclick=function(){ alert('hello world'); } 消 ...
- layui表格点击按钮下方新增加空白行
layui表格点击按钮下方新增加空白行 一.先上代码 二.代码解析 三.实现业务逻辑分析 四.页面展示 一.先上代码 html界面代码 js代码 二.代码解析 这只是我个人的的代码解析,想要得到更详细 ...
最新文章
- 一天之内用SDN能做出什么
- 为什么要选择Apache Pulsar(一)
- 骑士人才linux伪静态,骑士人才CMS伪静态规则
- GO语言使用的几个注意点
- 深入理解Linux软件包的配置、编译与安装
- 392. Is Subsequence 判断子序列
- 给mysql数据添加一个只拥有一张表的权限
- yy神曲url解析php_php解析url的三个示例
- 对象的使用 java 1613806439
- 引用计数器法 可达性分析算法_面试官:你说你熟悉jvm?那你讲一下并发的可达性分析...
- 【数据清洗】异常点的理解与处理方法(1)
- TensorFlow入门:线性回归
- 高中生入门计算机编程,高中生必看:入门学软件编程,看这三点...
- WebService接口开发和调用
- C语言 设计项目课题,C语言课程设计课题.doc
- 基于Android系统手机通讯录管理软件的设计与开发
- 整个人麻掉!这竟然是一家可以养老的互联网大厂...
- 什么原因导致LED发光二极管的光衰?
- 黑客攻击入门:DNS欺骗、ARP攻击和钓鱼网站制作
- 如何提高在搜索引擎中的排名-百度排名-竞价排名-自然排名
热门文章
- 斐波那契数列。古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子, 假如兔子都不死,问每个月的兔子总数为多少?
- java 悬浮提示框_弹出提示框的方式——java
- Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix
- 2021,Java最全的分布式面试题合集附答案,共2w字!
- 面试再问 HashMap,求你把这篇文章发给他!
- zju眨眼数据集_浙大 CBIST团队发布高质量的多中心MRI公开数据集
- 如何提高python代码运行速度_一行代码让你的python运行速度提高100倍
- 动态连接_二维动画动态连接基础
- java表格选中事件_表格中删除选中的操作
- sparksql 保存点_Spark SQL笔记整理(三):加载保存功能与Spark SQL函数