文档章节

jQuery增加和减少表单元素

h
 huiyingzzx1018
发布于 2016/06/28 15:27
字数 307
阅读 23
收藏 0

主要使用append方法

function add(){
        var max = parseInt($("#maxnum").val());
        var maxnext = max + 1;
        var html = '<div  id="optionGroup'+maxnext+'"><div class="form-group"> <label class="col-md-2 control-label"><fmt:message key="activityNews.vote.optionNew"/></label> <div class="input col-md-6"> <input type="text" name="voteOption" value="" class="form-control" maxlength="100" id="text'+maxnext+'"/> <a href="javascript:void(0);" data-original-title="删除" onclick="javascript:minus('+maxnext+',-1);" style="position: absolute;right:15px;top:7px;"><i class="fa fa-minus-square"></i></a> </div>  <a href="javascript:void(0);" class="btn btn-xs btn-default" data-original-title="增加" id="addbutton'+maxnext+'" onclick="javascript:add();" style="height: 20px"> <i class="fa fa-plus-square"></i> </a>  </div> <div class="form-group" style="clear: both;" > <label class="col-md-2 control-label"><fmt:message key="activityNews.picUrl" /></label> <div class="input col-md-6"> <div class="add-file"> <span class="button"><input type="file" name="option_pic" onchange="this.parentNode.nextSibling.value = this.value"> <fmt:message key="common.attachImage" /></span><input type="text" placeholder="请上传 640 * 320 的图片" class="form-control required" readonly="readonly"> </div> </div> </div> </div>';
        //$("#addbutton"+max).css('display','none');
        $('#option2').append(html);
        $("#maxnum").val(maxnext);
        for(var i = max; i > 0; i--){
            if($("#text"+i).val() != undefined){
                $("#addbutton"+i).css('display','none');
                break;
            }
        }
    }
function minus(num,id){
        if(num == 1 || num == 2){
            return false;
        }
        var pre = num - 1;
        var max = parseInt($("#maxnum").val());
        if(id != -1){
            var html = '<input type="hidden" name="voteOptionDeleteId" value="'+id+'"/>';
            $("#optionDelete").append(html);
        }
        $("#optionGroup"+num).remove();
        
            for(var i = max; i > 0; i--){
                if($("#text"+i).val() != undefined){
                    $("#addbutton"+i).css('display','inline');
                    break;
                }
            }
            
    }

 

© 著作权归作者所有

共有 人打赏支持
上一篇: jqueryDateTimePicker
下一篇: jqueryDateTimePicker
h
粉丝 2
博文 2
码字总数 564
作品 0
苏州
私信 提问
20个jQuery插件,帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地使用体 验。基于这一点,很多设计师开始使...

鉴客
2012/03/31
4.9K
13
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
07/31
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0
jQuery ajax - serialize()方法以及常见问题

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax - serialize() 方法定义和用法 serialize() 方法通过序列化表...

freedonn
2014/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊PHP离线交易开发包

EthTool开发包适用于希望采用裸交易的PHP以太坊应用开发,主要包含以下特性: 支持裸交易部署/调用合约 内置etherscan和infura支持 keystore生成与读取,兼容geth/parity 采用裸交易的一个好...

笔阁
15分钟前
0
0
SRE的含义及与 DevOps 如何关联?

虽然站点可靠性工程师(site reliability engineer SRE)角色在近几年变得流行起来,但是很多人 —— 甚至是软件行业里的 —— 还不知道 SRE 是什么或者 SRE 都干些什么。为了搞清楚这些问题...

linuxCool
16分钟前
1
0
月入3万之一个程序员的转行坎坷历程

陈年往事 “我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。 互联网兴起今天,...

苏南-首席填坑官
38分钟前
1
1
OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
今天
335
7
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部