宝哥软件园

jQuery实现动态添加、删除按钮及投入输入框的方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-05

本文实例讲述了jQuery实现动态添加、删除按钮及投入输入框的方法。分享给大家供大家参考,具体如下:

html healtheta字符集=' utf-8 '标题动态创建按钮/title脚本src=' http://应用程序。bdimg。com/libs/jquery/2。1 .4/jquery。量滴js '/script/head dya href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' id=' AddMoreFileBox ' class=' BTN BTN-信息'添加更多的投入输入框/a/span/pdiv id=' input wrapper ' divinput type=' Text ' name=' mytext[]' id=' field _ 1 ' value=' Text 1 '/a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' remove class ' input type=' button ' value='删除/a/div/divscript$(文档)。 ready(function(){ var MaxInputs=8;//最大输入框allowedvar输入包装=$(“#输入包装”);//输入框包装IDvar AddButton=$(' # AddMoreFileBox ');//添加按钮InputsWrapper.length//initlal文本框count var字段计数=1;//为了跟踪文本框,添加了$(添加按钮).单击(函数(e)//在添加输入按钮上单击{ if(x=MaxInputs)//允许的最大输入框{ FieldCount//文本框添加增量//添加输入框$(输入包装).追加(' divinput type=' Text ' name=' mytext[]' id=' field _ ' field count ' ' value=' Text ' field count ' '/a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' remove class ' input type=' button ' value='删除/a/div ');x;//文本框增量}返回false });$(“正文”).打开('点击','。removeclass ',函数(e){//用户单击移除文本if(x ^ 1){ $(this).父代(' div ').移除();//删除文本框x-;//减量文本框}返回false })});/脚本/正文/html运行效果图如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题: 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

更多资讯
游戏推荐
更多+