首页 > 代码库 > 页面JS实现按钮点击增加输入框

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

2024-07-09 04:22:59   226人阅读

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

　　实现的思路：

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

@Entitypublic 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开发，页面要用户体验好的话会经常会加些特效，有时候感觉很有难度，不过实现后又觉得很有成就感。所有特地把工作遇到的自己花费了脑力的实现的代码整理了下，用来以后温故知新和给同样有需求的朋友一个参考。

　　


联系
我们