jquery 动态添加,降低input表单的方法
2024-10-21 22:52:11
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>
最新文章
- 初试PHP单元测试TDD之安装PHPUnit
- android studio2.2 的Find Sample Code点击没有反应
- Objective-C( Foundation框架 一 NSDictionary (NSMutaleDictionary))
- 前端mock数据之mockjax和mockjson
- UVa 11246 - K-Multiple Free set
- IIS调用COM组件的权限问题
- drp用户管理完成后,asp.net与java的一个简单比较
- java泛型 之 入门(interface)
- icheck.min.js 选中效果
- oracle 锁表的处理。
- MongoDB--在windows下的安装过程及基本配置
- MapReduce中一次reduce方法的调用中key的值不断变化分析及源码解析
- MySql sql按时间分组
- 借助TZImagePickerController三方库理解自定义相册
- Spring mvc中junit测试遇到com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException错误怎么解决
- nginx配置SSL实现服务器/客户端双向认证
- 两篇文章带你走入.NET Core 世界:Kestrel+Nginx+Supervisor 部署上云服务器(二)
- JPA的初级CRUD-01
- 使用APScheduler启动Django服务时自动运行脚本(可设置定时运行)
- Shiro权限管理框架详解