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动态添加及删除表单上传元素的方法(附demo源码下载)
本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
-
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动态增加删除表格行的小例子
复制代码 代码如下: <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自动添加表单项的方法
本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=
-
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
随机推荐
- Android 微信文件传输助手文件夹
- jquery 滚动条事件简单实例
- CI分页类首页、尾页不显示的解决方法
- php专用数组排序类ArraySortUtil用法实例
- thinkPHP5.0框架简单配置作用域的方法
- Javascript中的神器——Promise
- asp+ajax实现静态页面分页的代码
- Eclipse配置Tomcat和JDK步骤图解
- jQuery文字提示与图片提示效果实现方法
- 一个函数解决SQLServer中bigint 转 int带符号时报错问题
- 勾选时激活input 否则禁用的javascript代码
- My Desktop :) 桌面式代码
- 春节长假安全手册
- javascript实现的像java、c#之类的sleep暂停的函数代码
- 深入浅出23种设计模式
- Kotlin 编程三分钟入门
- Python通过matplotlib画双层饼图及环形图简单示例
- Unity3D Shader实现扫描显示效果(2)
- Python模块汇总(常用第三方库)
- MongoDB数据库的日志文件深入分析