jquery 动态增加,减少input表单的简单方法(必看)
html代码如下
<html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html>
js代码如下
<script> var max_fields = 5; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button =(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < max_fields){ //max input box allowed x++; //text box increment $(wrapper).append('<tr style=""><td></td><td><button class="remove_field btn">Del</button></td></tr>'); //add input box } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).closest('tr').remove(); x--; }) </script>
以上就是小编为大家带来的jquery 动态增加,减少input表单的简单方法(必看)全部内容了,希望大家多多支持我们~
相关推荐
-
jQuery实现表格行和列的动态添加与删除方法【测试可用】
本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19
-
jQuery自动添加表单项的方法
本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=
-
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
-
jquery动态增加删除表格行的小例子
复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20; //要显示的条数 var count =
-
jquery 动态增加,减少input表单的简单方法(必看)
html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m
-
减少C++代码编译时间的简单方法(必看篇)
c++ 的代码包含头文件和实现文件两部分, 头文件一般是提供给别人(也叫客户)使用的, 但是一旦头文件发生改变,不管多小的变化,所有引用他的文件就必须重新编译,编译就要花时间,假如你做的工程比较大(比如二次封装chrome这类的开发),重新编译一次的时间就会浪费上班的大部分时间,这样干了一天挺累的, 但是你的老板说你没有产出,结果你被fired, 是不是很怨啊, 如果你早点看到这段文章,你就会比你的同事开发效率高那么一些,那样被fired就不会是你了,你说这篇文章是不是价值千金!开个玩笑 :)
-
jquery 实时监听输入框值变化的完美方法(必看)
只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 //逻辑 }) 以上代码在因为用的bind,所以当遇到追加的新input标签时,则不能监听了. 如下情景: 由上图可以看到189和135号码是可以监听的,但是新追加的178和188则无效.
-
改进Django中的表单的简单方法
首先,search()视图对于空字符串的处理相当薄弱--仅显示一条"Please submit a search term."的提示信息. 若用户要重新填写表单必须自行点击"后退"按钮, 这种做法既糟糕又不专业.如果在现实的案例中,我们这样子编写,那么Django的优势将荡然无存. 在检测到空字符串时更好的解决方法是重新显示表单,并在表单上面给出错误提示以便用户立刻重新填写. 最简单的实现方法既是添加else分句重新显示表单,代码如下: from django.ht
-
JQuery动态创建DOM、表单元素的实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
JavaScript实现动态增加文件域表单
js代码: 复制代码 代码如下: <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id) { if (file_count > 9) { alert("最u22810 10个u25991 件u22495 "); return; } //定义行变量row:单元格变量cell:单元
-
js实现动态增加文件域表单功能
本文实例为大家分享了js实现动态增加文件域表单的具体代码,供大家参考,具体内容如下 实现代码: <html> <head> <title>动态添加表单元素</title> </head> <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id)
-
JQuery打造PHP的AJAX表单提交实例
如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="
-
Jquery中ajax提交表单几种方法(get、post两种方法)
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType
随机推荐
- JavaScript实现三级级联特效
- 在linux下开启FTP服务方法介绍
- Java求字符串中出现次数最多的字符串以及出现次数
- Java数据库连接PreparedStatement的使用详解
- 在服务器端实现无间断部署Python应用的教程
- asp.net(C#)生成Code39条形码实例 条码枪可以扫描出
- ASP.NET网站实时显示时间的方法
- JavaScript获得url查询参数的方法
- 防止重复发送 Ajax 请求
- JavaScript装饰器函数(Decorator)实例详解
- 在asp.net中使用加密数据库联接字符串保证数据安全
- 微信小程序 (八)View组件详细介绍
- PHP手机号码归属地查询代码(API接口/mysql)
- Node.js 使用递归实现遍历文件夹中所有文件
- Java中的final关键字深入理解
- centos7.3 安装mysql5.7.18的详细教程
- 实例分析javascript中的call()和apply()方法
- Javascript中的异步编程规范Promises/A详细介绍
- javascript单引号和双引号的区别和处理
- PHP快速生成各种信息提示框的方法