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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
关于this和self的使用说明
Aug 01 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 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
php mssql 时间格式问题
2009/01/13 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
php写app用的框架整理
2019/09/29 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
javascript实现移动端轮播图
2020/12/09 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python实现的栈(Stack)
2018/01/26 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
故宫的导游词
2015/01/31 职场文书
民政局未婚证明
2015/06/15 职场文书
AJAX学习笔记
2021/05/18 Javascript
golang特有程序结构入门教程
2021/06/02 Python