jquery 动态添加,降低input表单的方法
2023-09-11 14:20:45 时间
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提示框插件Tipso演示
- jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析
- [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值
- zTree -- jQuery 树插件 使用方法与例子
- 使用jQuery重置(reset)表单的方法
- jQuery实现判断li的个数从而实现其他功能
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery源码-美元$的若干种使用方法
- jquery动态加载js/css文件方法
- jquery 事件委托绑定click的使用方法
- JQUERY中各个ajax函数
- jQuery选择器--简洁又全面(转)
- jQuery 事件 - delegate() 方法
- jQuery.validator 验证规则详解
- 使用jquery的方法和技巧2,点击多选框的jquery响应
- 使用jquery的方法和技巧
- Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析
- JQuery模板插件jquery.tmpl-动态ajax扩展
- jQuery手机菜单
- [FAQ] jQuery prop 与 attr 的区别
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- jQuery.sap.storage getAccessToken的技术实现
- 根据JQuery开发自定义插件。
- jQuery UI 实例 - 部件库(Widget Factory)
- jQuery UI 实例 - 放置(Droppable)
- jquery方法.serializeArray()获取name和value并转为json数组
- js-jquery-SweetAlert【二】配置方法
- jquery easyui的应用-2
- 待续未完- 自己写后台内容管理程序 - 用tp框架 和 前台 jquery ui等写的
- jquery 中一些 特殊方法 的特殊使用 一览表
- 为Jquery类和Jquery对象扩展方法
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解