jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）
2024-04-09 10:12:15
接着上一篇
jQuery + JavaScript 实现的动态添加文本框功能（一）
来说。首先看一下效果图：
1，jQuery实现的动态添加文本框和动态删除文本框的功能-1-操作前.jpg
2，jQuery实现的动态添加文本框和动态删除文本框的功能-2-添加3个文本框.jpg
3，jQuery实现的动态添加文本框和动态删除文本框的功能-3-删除文本框提示.jpg
4，jQuery实现的动态添加文本框和动态删除文本框的功能-4-删除文本框以后.jpg
在上一篇文章，动态添加文本框功能的基础上，这一次，增加了动态删除文本框的功能。可以删除指定的文本框，删除是通过id来实现的。
1，每一个新添加的文本框，都有一个唯一的id；
2，每一个新添加的文本框，都有一个取消上传的按钮，这个按钮的id也是唯一的；
3，id的唯一性，能够保证，我们所有动态添加的内容，都是可操作的。
好了，下面来看完整代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>SpringMVC 实现多文件上传</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <link rel="stylesheet" href="CSS/myapplications.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript">
//发送ajax异步请求
function ajaxTest(){//var xmlHttp;//如果浏览器支持XMLHttpRequest，则直接创建XMLHttpRequest对象if(window.XMLHttpRequest){//创建XMLHttpRequest对象xmlHttp = new XMLHttpRequest();}//创建ActiveXObject对象else{//xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//发送XMLHttpRequest异步请求xmlHttp.open("POST", "AjaxAsynchronousRequestTest.action", true);//xmlHttp.send();//接收服务器端返回的数据var responsetext = xmlHttp.responseText;alert(message);//获取文本框对象var textArea = document.getElementById("input_url");textArea.value = responsetext;
}//使用jQuery + Ajax + SpringMVC
$(function(){//文本框点击事件$("#input_url").click(function(){//var $a = $(this);//发送ajax请求$.ajax({//url:"AjaxAsynchronousRequestTest.action",type:'post',data:'name=admin',dataType:'json',success:function(data,status){if(status == "success"){//接收服务器端传来的数据var str1_from_server = data.message;var str2_from_server = data.msg;//将接收到的数据显示到文本框$("#response_text_1").val(str1_from_server);$("#response_text_2").val(str2_from_server);}},//error:function(xhr,textStatus,errorThrown){}});});
}
);//点击按钮，动态添加文件上传控件
function produceInputElement(){//定义一个变量，表示当前input文本框的id值的前缀var id_prefix = "fileToUpload_";//获取隐藏标签，从隐藏标签中获取id，达到动态获取id的目的var hidden_input = document.getElementById("hidden_input");//定义一个变量，表示当前input文本框的id值的后缀var id_suffix = hidden_input.value;//当前input文本框的id值var id_current = id_prefix + id_suffix;//生成新标签$('<tr><td><input type="file" id="' + id_current + '" /></td></tr>').appendTo($("#file_input_1"));//为新添加的按钮，设置CSS样式var current_input = document.getElementById(id_current);current_input.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height: 1.428571429;color: red;vertical-align: middle;background-color:#eeeeee;border:2px solid #404040;border-radius:2px;";//定义一个变量，用来表示需要保存到隐藏标签中的值var new_input = new String(parseInt(hidden_input.value) + 1);//更新隐藏标签的值hidden_input.value = new_input;}//点击按钮，动态添加文件上传控件，并且能够动态删除文件上传控件
function produceAndDeleteInputElement(){//定义一个变量，表示当前input文本框的id值的前缀var id_prefix = "fileToUploadAndDelete_";//获取隐藏标签，从隐藏标签中获取id，达到动态获取id的目的var hidden_input = document.getElementById("hidden_input");//定义一个变量，表示当前input文本框的id值的后缀var id_suffix = hidden_input.value;//当前input文本框的id值var id_current = id_prefix + id_suffix;//当前删除按钮的idvar id_current_delete = id_current + "_delete";//当前td标签的父标签tr标签的idvar id_current_tr = id_current_delete + "_tr";//生成新标签$('<tr id="' + id_current_tr + '"><td><input type="file" id="' + id_current + '" /></td><td><input type="button" id="' + id_current_delete + '" value="取消上传" οnclick="deleteFile('+id_current_delete+')"></td></tr>').appendTo($("#file_input_delete_1"));//为新添加的文件上传控件，设置CSS样式var current_file = document.getElementById(id_current);current_file.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height:1.428571429;color:red;vertical-align: middle;background-color:#eeeeee;border:2px solid #404040;border-radius:2px;";//为文件上传控件想对应的删除按钮，设置CSS样式var current_file_delete = document.getElementById(id_current_delete);current_file_delete.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height:1.428571429;color:red;vertical-align: middle;background-color:#eeeeee;border:2px solid #404040;border-radius:2px;";//定义一个变量，用来表示需要保存到隐藏标签中的值var new_input = new String(parseInt(hidden_input.value) + 1);//更新隐藏标签的值hidden_input.value = new_input;}//删除指定的文件上传控件
function deleteFile(id_current_delete){//根据删除按钮的id （id_current_delete） 获得 父标签 tr 的id//当前td标签的父标签tr标签的idvar id_current_tr = "#" + id_current_delete.id + "_tr";//测试alert("确定要删除，id为" + id_current_delete.id + "_tr" + " 的文本框吗？");//jQuery动态删除文件上传控件$(id_current_tr).remove();}</script>
</head>
<body><!-- 隐藏标签保存新生成的input 文件上传控件的 id 值 -->
<input type="hidden" id="hidden_input" value="1"><div id="container">
<table class="zebra"><caption>SpringMVC 实现多文件上传</caption><thead><tr><th>项目名称</th><th>简单描述</th><th>用到的技术</th><th>查看详情</th></tr></thead><tbody><tr><td>SpringMVC 实现多文件上传</td><td>一次上传多个文件</td><td>SpringMVC + Ajax + MySQL</td><td></td></tr><c:forEach items="${mytest}" var="item"><tr><td>${item.myid}</td><td>${item.mydata}</td><td>${item.myname}</td><td>操作</td></tr></c:forEach></tbody>
</table>
</div><!-- Ajax Asynchronous request test --><div id="container"> <table class="zebra"><thead><tr><th>一，SpringMVC 与 ajax 交互测试</th></tr></thead><tbody><tr><td><input type="button" name="determine_url" id="input_url" value="点击体验ajax请求"/></td></tr><tr><td><input type="text" name="determine_url" id="response_text_1" value="这里显示ajax异步请求的数据，数据来自服务器端"/></td></tr><tr><td><input type="text" name="determine_url" id="response_text_2" value="这里显示ajax异步请求的数据，数据来自服务器端"/></td></tr></tbody></table>
</div><!-- jQuery + JavaScript produce input element dynamic --><div id="container"> <table class="zebra"><thead><tr><th>二，jQuery + JavaScript 实现动态添加文件上传控件的功能</th></tr></thead><tbody><tr><td><input type="file" id="fileToUpload_0" /></td></tr></tbody></table>
</div><div id="container"> <table class="zebra"><tbody id="file_input_1"></tbody></table>
</div><div id="container"> <table class="zebra"><tr><td><input type="button" id="uploadManyFile_button" value="继续添加文件" οnclick="produceInputElement()"/></td></tr></tbody></table>
</div><!-- jQuery + JavaScript delete input element dynamic --><div id="container"> <table class="zebra"><thead><tr><th>三，jQuery + JavaScript 实现动态删除文件上传控件的功能</th></tr></thead><tbody><tr><td><input type="file" id="fileToUploadAndDelete_0" /></td></tr></tbody></table>
</div><div id="container"> <table class="zebra"><tbody id="file_input_delete_1"></tbody></table>
</div><div id="container"> <table class="zebra"><tr><td><input type="button" id="uploadManyFileAndDelete_button" value="继续添加文件" οnclick="produceAndDeleteInputElement()"/></td></tr></table>
</div><div id="div_bottom"> <table><thead><tr><th>@2016 JavaSpider 沪XXX 版权所有 All Right Reserved</th></tr></thead><tbody><tr><td></td></tr></tbody></table>
</div></body>
</html>
说明：
1，jQuery直接通过官方的CDN引入；
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>2，CSS代码
<link rel="stylesheet" href="CSS/myapplications.css" type="text/css" />myapplications.css
@charset "UTF-8";html, body{padding:0;margin:0;position:relative;background:url(../images/body.jpg);background-repeat:repeat;color:#fff;letter-spacing:1px;font-family:Georgia, "Times New Roman", Times, serif;
}.zebra caption{font-size:20px;font-weight:normal;background:url(../images/zebratable.png);background-repeat:no-repeat;background-position: 130px center;padding-top: 20px;height:50px;}#container{padding-top:20px;width:960px;margin:0 auto;
}table {border-collapse: collapse;border-spacing: 0;width:100%;-webkit-box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1);box-shadow: 0px 2px 1px 5px rgba(242, 242, 242, 0.1);
}.zebra {border: 1px solid #555;
}.zebra td {border-left: 1px solid #555;border-top: 1px solid #555;padding: 10px;text-align: left;
}.zebra th, .zebra th:hover {border-left: 1px solid #555;border-bottom: 1px solid #828282;padding: 20px; background-color:#151515 !important;background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important;background-image: -webkit-linear-gradient(top, #151515, #404040) !important;background-image: -moz-linear-gradient(top, #151515, #404040) !important;background-image: -ms-linear-gradient(top, #151515, #404040) !important;background-image: -o-linear-gradient(top, #151515, #404040) !important;background-image: linear-gradient(top, #151515, #404040) !important;color:#fff !important;font-weight:normal;
}.zebra tbody tr:nth-child(even) {background: #000 !important;color:#fff;
}.zebra tr:hover *{background: #eeeeee;color:#000;
}.zebra tr {background:#404040;color:#fff;
}#input_url{
width:100%;
height:100%;
padding: 12px 12px;
font-size: 15px;
line-height: 1.428571429;
color: #000000;
vertical-align: middle;
background-color: #ffffff;
border: 2px solid gray;
border-radius: 4px;
}#submit_url_one,#submit_url_all,#response_text_1,#response_text_2,#fileToUpload_0,#uploadManyFile_button,#fileToUploadAndDelete_0,#uploadManyFileAndDelete_button{
width:100%;
height:100%;
padding: 6px 2px;
font-size: 14px;
line-height: 1.428571429;
color: red;
vertical-align: middle;
background-color: #eeeeee;
border: 2px solid #404040;
border-radius: 2px;
}#submit_url_one:hover{background: #404040;border: 2px solid #000000;
}3，难点：如何为新生成的input文件上传文本控件，添加唯一id 。
由于每一个<input type="file" , id="唯一id" > 元素 的id都必须是唯一的，所以这里我们不能把id写死，一旦写死，后面删除指定的input 标签 就会有麻烦。我们这里是怎么实现的呢，我们通过一个隐藏标签来实现，如下：
<!-- 隐藏标签保存新生成的input 文件上传控件的 id 值 的 后缀 -->
<input type="hidden" id="hidden_input" value="1">我们用input隐藏标签，来保存当前的 <input type="file" , id="唯一id" > 的id的值的后缀，流程如下：
a，添加文本框之前，我们从隐藏标签中获取id值，也就是我们上面的 1，初始值设定为1；
b，我们把指定的前缀 fileToUploadAndDelete_ 和 获取的后缀 1 拼接起来，就构成了我们的<input type="file" , id="唯一id" > 的唯一id；
c，然后我们就可以使用jQuery的append方法，把新生成的<input type="file" , id="唯一id" >动态添加到页面中了；
d，把后缀值转换成整数 ，加上1，保存到隐藏文本框（也就是更新隐藏标签中的值）；
代码如下：
//点击按钮，动态添加文件上传控件，并且能够动态删除文件上传控件
function produceAndDeleteInputElement(){//定义一个变量，表示当前input文本框的id值的前缀var id_prefix = "fileToUploadAndDelete_";//获取隐藏标签，从隐藏标签中获取id，达到动态获取id的目的var hidden_input = document.getElementById("hidden_input");//定义一个变量，表示当前input文本框的id值的后缀var id_suffix = hidden_input.value;//当前input文本框的id值var id_current = id_prefix + id_suffix;//当前删除按钮的idvar id_current_delete = id_current + "_delete";//当前td标签的父标签tr标签的idvar id_current_tr = id_current_delete + "_tr";//生成新标签$('<tr id="' + id_current_tr + '"><td><input type="file" id="' + id_current + '" /></td><td><input type="button" id="' + id_current_delete + '" value="取消上传" οnclick="deleteFile('+id_current_delete+')"></td></tr>').appendTo($("#file_input_delete_1"));//为新添加的文件上传控件，设置CSS样式var current_file = document.getElementById(id_current);current_file.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height:1.428571429;color:red;vertical-align: middle;background-color:#eeeeee;border:2px solid #404040;border-radius:2px;";//为文件上传控件想对应的删除按钮，设置CSS样式var current_file_delete = document.getElementById(id_current_delete);current_file_delete.style = "width:100%;height:100%;color:yellow;padding:6px 2px;font-size: 14px;line-height:1.428571429;color:red;vertical-align: middle;background-color:#eeeeee;border:2px solid #404040;border-radius:2px;";//定义一个变量，用来表示需要保存到隐藏标签中的值var new_input = new String(parseInt(hidden_input.value) + 1);//更新隐藏标签的值hidden_input.value = new_input;}4，难点：删除时，如何保证把 <input type="file" , id="唯一id" >标签的父标签一起删除，也就是说，我们在执行删除时，需要删除掉的是我们添加的所有内容，也就是下面这些html标签：
<tr><td><input type="file" id="fileToUploadAndDelete_1" /></td><td><input type="button" id="fileToUploadAndDelete_1_delete" /></td></tr>这里我们同样采用有规律的id来操作，什么意思呢，也就是说，我们在生成<input type="file" , id="唯一id" > 的唯一id时，根据我们
自定义的规则，动态生成删除按钮<input type="button" id="fileToUploadAndDelete_1_delete" /> 的id，然后在动态生成父标签tr标签
的id <tr id="fileToUploadAndDelete_1_delete_tr"></tr>。也就是说我们必须要保证，我们动态生成的所有html元素，对我们来说都是
透明的、可操作的。
//删除指定的文件上传控件
function deleteFile(id_current_delete){//根据删除按钮的id （id_current_delete） 获得 父标签 tr 的id//当前td标签的父标签tr标签的idvar id_current_tr = "#" + id_current_delete.id + "_tr";//测试alert("确定要删除，id为" + id_current_delete.id + "_tr" + " 的文本框吗？");//jQuery动态删除文件上传控件$(id_current_tr).remove();}好了，来通过流程总结一下：
a，我们自定义新生成的文件上传标签<input type="file" , id="唯一id" > 的id的前缀为 fileToUploadAndDelete_
b，我们通过隐藏标签<input type="hidden" id="hidden_input" value="1">，获得后缀1，此时唯一id 就是：fileToUploadAndDelete_1
c，我们约定新生成的删除按钮<input type="button" id="删除按钮id" > 的id ，是在fileToUploadAndDelete_1的基础上加上后缀_delete，那么此时 删除按钮id 就是 ：fileToUploadAndDelete_1_delete
d，同样的，我们约定新生成的父标签tr <tr id="父标签tr的id">的id，是在fileToUploadAndDelete_1_delete 的基础上加上后缀 _tr,
那么此时 父标签tr的id 就是：fileToUploadAndDelete_1_delete_tr
OK，这是我们就实现了动态添加的所有标签都有一个唯一id，所有的标签，都是可操作的。
今天就介绍到这里，至此，一次上传多张图片的前台工作基本上都解决了。稍后继续完善后台功能，一次上传多张图片。我们使用的是JavaScript、jQuery、ajax、SpringMVC、MySQL数据库。敬请期待...
jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）相关推荐
- 实现具备添加、查看、修改以及删除联系人信息功能的手机通讯录。
实现具备添加.查看.修改以及删除联系人信息功能的手机通讯录. print("--------------手机通讯录-------------") print("--- 1 ...
- jquery 动态添加一行数据，支持动态删除
2019独角兽企业重金招聘Python工程师标准>>> 简介: 1.隐藏一个模板: 2.使用clone方法: 3.修改clone后的代码: 详细过程: 1.html代码 <tr ...
- android 动态添加删除控件,求教Android，动态添加到控件能动态删除吗？
protected View createView() {//动态添加组件 Button btn = new Button(this);//动态创建按钮 btn.setId(index++); btn ...
- 移除动态view android,请教Android,动态添加到控件能动态删除吗?
可以的.有2中方式: 1.动态添加的时候为组件设置id,删除的时候根据id查找到对应组件,然后删除 2.根据父节点,获取所有父组件下的子组件,然后依次删除. 示例: protected View cr ...
- vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
- 【JAVA】文本处理（1）—删除文本中的空白行
一.前言 本次学习应用于文本处理方面,主要的功能是为了实现删除文本中的空白行,便于我们阅读和储存. java.io包为我们提供了相关的API,实现了对所有外部系统的输入输出操作,这就是我们这章所要学习 ...
- java 动态添加定时器_quartz实现任务动态增加和删除
场景 这几天做项目的时候遇到了个状态自动切换的场景.该场景具体情况如下: 用户可以创建多个活动 活动有开始时间和结束时间 活动有个状态:未上线.未开始(上线但未到开始时间).进行中(上线且处于开始时间 ...
- antd tree 动态添加_推荐三款动态壁纸软件，足够让你的桌面惊艳！
点击上方"码农的后花园",选择"星标" 公众号 精选文章,第一时间送达今天给大家推荐三款动态壁纸软件,给你的桌面添加一点精彩,心情也更美呢 ~ 1,WinDyn ...
- android动态添加xml布局,android – 如何动态添加视图已经在xml布局中声明的RelativeLayout？...
为第二个添加的Button LayoutParams添加规则RelativeLayout.RIGHT_OF: // first Button RelativeLayout rLayout = (Rel ...
- python列表动态添加_在Python中动态创建列表
我有一堆与不同组关联的项,我最终想为每个组创建一个列表,其中包含所有关联项.在 问题是我不知道有多少组,所以如何动态生成正确数量的列表,以及如何调用它们?在 我在循环item_list和group_l ...
最新文章
- 懒汉式单例和饿汉式单例优缺点
- 今年大事：年终汇算清缴，你是退还是补？惊喜还是惊吓？
- 化学到底有多难难难难！为了让学生搞懂化学，竟然...
- mysql教程目录_MySql目录（二）
- mysql企业监控_mysql企业监控
- 通过 Python_Faker 生成测试数据
- qt设置文本背景透明_QT QWidget设置窗体透明度方法汇总
- wpf treeview 绑定不同的对象
- hive 筛选出数字_后悔没早点学会这几个万能的Excel筛选技巧，这些操作技巧得记牢...
- 1 熊猫烧香病毒分析
- reactos操作系统实现(109)
- RDKit | 基于RDKit 的化合物预处理
- Flash存储的故事
- 单片机原理与应用复习
- Blender的常用快捷键，学习必备
- scala--模式匹配
- Nginx基础应用配置小结 - 运维笔记
- ArtWork+并查集二维
- 索氏提取器使用注意_索氏提取法注意事项
- Java并发之魂——synchronized深度解析