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 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python文件操作基本流程代码实例
2017/12/11 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python虚拟环境venv用法详解
2020/05/25 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
工地材料员岗位职责
2015/04/11 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
培养联系人考察意见
2015/06/01 职场文书
红楼梦读书笔记
2015/06/25 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android