jQuery动态添加


Posted in Javascript onApril 07, 2016

有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能。

先给大家展示下效果图:

jQuery动态添加

<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//添加一行<tr>
function add() {
var content = "<tr><td>";
content += "<input type='file' name='file'><input type='button' value='Remove' onclick='remove(this)'>";
content +="</td></tr>"
$("#fileTable").append(content);
}
//删除当前行<tr>
function remove(obj) {
$(obj).parent().parent().remove();
}
</script>
</head>
<body>
<form id="fileForm" action="" method="post" enctype="multipart/form-data">
<table id="fileTable">
<tr>
<td>
<input type="file" name="file"><input type="button" id="addButon" value="Add" onclick="add()">
</td>
</tr>
</table>
</form>
</body>
</html>

介绍JQuery获取input type="text"中的值的各种方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery获取文本框的值</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//使用id的方式获取
$(document).ready(function(){
//1
$("#button_text1").click(function(){
var result1 = $("#input_text1").val();
alert("result1 = " + result1);
});
//2
$("#button_text2").click(function(){
var result2 = $("input[id='input_text2']").val();
alert("result2 = " + result2);
});
//3
$("#button_text3").click(function(){
var result3 = $("input[id='input_text3']").attr("value");
alert("result3 = " + result3);
});
//4. 可以通过type的值来获取input中的值(未演示)
/*
$("#button_text4").click(function(){
var result4 = $("input[type='text']").val();
alert("result4 = " + result4);
});
*/
//5. 可以通过name的值来获取input中的值(未演示)
/*
$("#button_text5").click(function(){
var result5 = $("input[name='text']").val();
alert("result5 = " + result5);
}); 
*/
});
</script>
</head>
<body>
<!-- 获取文本框的值:方式一 -->
<div id="test1">
<input id="input_text1" type="text" value="test1" style="width: 100px;" />
<button id="button_text1">test1</button>
</div>
<!-- 获取文本框的值:方式二 -->
<div id="test2">
<input id="input_text2" type="text" value="test2" style="width: 100px;" />
<button id="button_text2">test2</button>
</div>
<!-- 获取文本框的值:方式三 -->
<div id="test3">
<input id="input_text3" type="text" value="test3" style="width: 100px;" />
<button id="button_text3">test3</button>
</div>
</body>
</html>
Javascript 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
javascript模块化简单解析
Apr 07 #Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 #Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 #Javascript
jQuery实现简单滚动动画效果
Apr 07 #Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 #Javascript
原生js制作日历控件实例分享
Apr 06 #Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 #Javascript
You might like
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python中的包和模块实例
2014/11/22 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python将图片转base64,实现前端显示
2020/01/09 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
合作意向协议书范本
2014/03/31 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2016年国陪研修感言
2015/11/18 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书