`
dennisbing
  • 浏览: 159185 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js来添加重复的输入框

 
阅读更多

HTML代码:

     <div style="margin-top:60px;" id="pic_setting">
               <span style="font-family:Arial;font-size:13px;font-weight:bold;">默认轮播大图设置:</span>
               <div id="pic_div_contain">
                    <div class="pic_div_num" id="entry_1">
                         <p style="padding-left:15px;padding-top:20px;">
                              <span id="pic_num_1">1</span><span style="padding-left:10px;padding-right:10px;">图片地址</span>
                              <input id="pic_url_1" type="text" name="pic_url[]" style="width:375px;height:25px;margin-right:10px;"/>
                              <a href="javascript:void(0)" onclick="viewPic(1);return false;">预览</a>
                              <a href="javascript:void(0)" onclick="delPic(1);return false;">删除</a>
                         </p>
                         <p style="padding-left:15px;padding-top:10px;">
                              <span style="padding-left:17px;padding-right:10px;">链接地址</span>
                              <input id="link_url_1" type="text" name="link_url[]" style="width:375px;height:25px;"/>
                         </p>
                    </div>    
               </div>
                   
               <p style="padding-left:420px;padding-top:10px;"> <a href="#" onclick="addRoundPic();return false;">添加大图</a></p>
          </div>

JS代码:
     function addRoundPic() {
     var pre_id = $('#pic_div_contain .pic_div_num:last').attr('id');
    if ($('#pic_div_contain .pic_div_num').length >= 10 ) {
         $('#actionLayer').show();
          $("#actionLayer").css('left', (($(document).width()) / 2 - (parseInt(355) / 2)) + 'px');
          $('#actionHint').html('条目数最大为10条!');
          return false;
    } else {
        var _num = pre_id.indexOf('_');
        var entry_num = parseInt(pre_id.substr(_num+1))+1;
        var $html ='\
               <div class="pic_div_num"  id="entry_' + entry_num + '">\
                    <p style="padding-left:15px;padding-top:20px;">\
                         <span id="pic_num_' + entry_num + '">' + entry_num + '</span><span style="padding-left:10px;padding-right:10px;">图片地址</span>\
                         <input id="pic_url_' + entry_num + '" type="text" name="pic_url[]" style="width:375px;height:25px;margin-right:10px;"/>\
                         <a href="javascript:void(0)" onclick="viewPic(' + entry_num + ');return false;">预览</a>\
                         <a href="javascript:void(0)" onclick="delPic(' + entry_num + ');return false;">删除</a>\
                    </p>\
                    <p style="padding-left:15px;padding-top:10px;">\
                         <span style="padding-left:17px;padding-right:10px;">链接地址</span>\
                         <input id="link_url_' + entry_num + '" type="text" name="link_url[]" style="width:375px;height:25px;"/>\
                    </p>\
               </div>';
        $('#pic_div_contain').append($html);
        pre_id = "entry_"+entry_num;
    }
}

分享到:
评论

相关推荐

    jQuery实现输入框回车添加标签代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的输入框,用户可以在其中通过回车键添加标签,同时支持预设标签的选择、显示和删除,并能有效防止标签的重复添加。这个功能常用于博客系统、论坛或者社交...

    input输入框获取js点击文字内容.zip

    总的来说,"input输入框获取js点击文字内容.zip"项目是一个利用JavaScript实现的交互特效,它简化了用户与网页的交互,提高了用户体验。具体实现可能包括对`input`事件和`click`事件的监听,以及对`input`元素`value...

    jQuery输入框回车添加标签特效.zip

    该特效允许用户在输入框内输入关键词,按下回车键后,关键词自动转化为标签并显示在输入框上方,同时支持预设标签的选择和已存在标签的删除,以及防止重复标签的添加。 首先,我们需要引入jQuery库。在HTML文件头部...

    javascript经典特效---光标选择输入框.rar

    这个压缩包很可能包含了一个示例文件,用于演示如何用JavaScript来控制输入框的光标位置,以及实现选中特定文本的效果。 【描述】虽然描述部分重复了多次,但我们可以推测这可能是一个强调重点的提示,可能意味着这...

    jQuery验证码输入框代码.zip

    1. **jQuery库**:jQuery 是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个验证码插件中,jQuery将被用来监听用户输入,处理验证逻辑以及与服务器的交互。 2. **DOM操作**:jQuery...

    jquery输入框增加列表代码.zip

    同时,为了防止重复添加相同的项,我们可以对已有的列表项进行比对,确保添加的是独一无二的新内容。 最后,考虑到代码的可维护性和可扩展性,良好的编程实践包括模块化和封装。可以将这个功能封装成一个插件或者...

    Jquery动态添加输入框的方法

    jQuery提供了一套简洁的方法来实现动态添加页面元素,如输入框,以增强用户体验。本文将详细介绍如何使用jQuery的append方法动态添加输入框。 动态添加输入框是指在页面加载完成后,根据用户的操作或某些事件触发...

    vue.js实现只能输入数字的输入框

    总结来说,使用Vue.js创建只能输入数字的输入框可以通过几种方式实现:直接在Vue实例中使用`watch`监听器和`v-model`数据绑定,通过创建自定义Vue组件来实现输入限制,并通过添加自定义属性来指定绑定的数据。...

    仿百度输入框(在输入框输入时,会根据输入的内容模糊查询相关的做成下拉框显示在下面,供选择)

    - **HTML/CSS**: 创建一个输入框,通常使用`&lt;input type="text"&gt;`元素,并添加适当的CSS样式来实现百度输入框的外观。 - **JavaScript/jQuery**: 使用JavaScript或者jQuery监听用户在输入框中的输入事件,如`keyup...

    简单方便的标签输入框

    1. **实时输入验证**:用户在输入时,系统会立即检查新添加的标签是否有效,防止重复或不符合规则的标签。 2. **动态添加和删除标签**:用户可以轻松添加新的标签,同时也可以通过点击或拖拽来删除已有的标签。 3....

    基于JavaScript实现随机颜色输入框

    在按钮被点击时,会触发一个函数来创建表格和单元格,设置单元格的背景颜色,并最终将这个表格添加到页面中。这种操作正是利用了JavaScript提供的DOM接口,来访问和修改HTML文档结构。 知识点三:HTML与CSS的应用 ...

    jquery创建和删除多个同名的input输入框

    本篇文章将深入探讨如何使用jQuery来创建和删除多个具有相同名称的input输入框。这个操作在动态表单或者需要用户多次输入类似信息的场景中十分常见。 首先,我们需要理解HTML中的input元素。Input元素是用于用户在...

    当在输入框中输入时始终以一个浮动框扩展后缀如xxtxt

    这个功能可以通过JavaScript实现,特别是在现代Web应用中,经常使用React等JavaScript库来构建用户界面。 JavaScript是一种广泛使用的客户端脚本语言,用于增强网页的交互性。在这个场景中,我们需要监听输入框的...

    微信小程序 带搜索记录的输入框searchHaveHistory-master.zip

    同时,为了防止重复添加相同的搜索记录,需要在添加新记录前检查历史记录中是否已存在该条目。 5. **样式设计**:使用WXSS进行样式定制,使搜索框和历史记录列表符合应用的设计风格,提升用户体验。 6. **优化用户...

    jQuery实现输入框自动补全邮箱提示.zip_jquery

    1. **引入jQuery库**:确保页面头部包含了jQuery库的链接,通常使用CDN(内容分发网络)来加载,例如:`&lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt;`。 2. **选择输入框元素**:使用...

    jQuery点击输入框弹出软键盘输密码特效

    通过使用jQuery,开发者可以更高效地编写JavaScript代码,减少重复工作,同时增强页面的动态效果。 在这个特效中,jQuery首先被用来监听文本框的点击事件。当用户点击输入框时,会触发一个JavaScript函数,该函数...

    jQuery点击输入框弹出软键盘输密码特效.zip

    // 可以添加一个关闭键盘的按钮或者事件来隐藏键盘 $('.closeKeyboard').click(function() { $('#keyboard').removeClass('showKeyboard'); }); ``` 6. **优化与扩展**:根据实际需求,可以对软键盘的样式和...

    用js写的随机创建几位重复的密码

    在IT领域,尤其是在Web开发中,JavaScript(简称js)是一种常用的客户端脚本语言,用于增强网页的交互性和功能。在给定的标题“用js写的随机创建几位重复的密码”中,我们可以理解到这是一个利用JavaScript生成随机...

    Element输入框带历史查询记录的实现示例

    1. Element UI的输入建议( autocomplete)功能:Element UI是一个基于Vue.js的桌面端组件库,提供了多种UI组件来帮助开发者快速构建美观的用户界面。在本文中,重点使用了Element的输入框组件,并利用其内置的 ...

    JS实现可点击添加删除的下拉列表框多选标签控件源码.zip

    本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框,其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项,还可以通过点击来...

Global site tag (gtag.js) - Google Analytics