jquery 通过dom对象，添加多文本输入

html代码如下：

<p class="mailtip">
     <label id="lblReceiveCheck" style="color:Gray">请输入您需要接收的邮箱，如有多个请点击添加按钮，最多可添加5个接收邮箱</label>
                   </p>
                   <div id="divMailList">
                        <p>
                            <span class="before">发邮件至</span><input type="text" ID="sEmail" onfocus="AddRem.focusCheck(this);" onblur="AddRem.blurCheck(this);"/><span class="end">提醒</span>
                            <label class="check"></label>
                            <input type="button" value="+添加" class="button_small" onclick="AddRem.addMail(this,1);" /></p>
                   </div>

jquer代码如下：

var AddRem={ 
mailCount1 :1,//全局变量 
 addMail: function (obj) {
            if (AddRem.mailCount1 == 5) {
                $('#lblReceiveCheck').html('接收邮箱最多只能设置5个。').css({ color: 'Red' });
                return;
            }
            AddRem.mailCount1++;
            var mailLabel = document.createElement('span');//通过dom对象创建span 标签
            $(mailLabel).attr({ 'class': 'before' });//给span标签加上class属性
            var mailInput = document.createElement('input');
            $(mailInput).attr({ type: 'input', 'class': 'textbox', maxLength: 50 }).focus(function () {
                AddRem.focusCheck(this);//添加focus函数主要用来判断得到焦点判断输入框
            }).blur(function () {
                AddRem.blurCheck(this););//添加focus函数主要用来判断失去焦点判断输入框
            });
            var cancelButtn = document.createElement('input');
            $(cancelButtn).attr({ type: 'button', 'class': 'button_small' }).val('取消').click(function () {
                AddRem.mailCount1--;
                $(this).parent().remove();//移除标签
                $('#lblReceiveCheck').html('请输入您需要接收的邮箱，如有多个请点击添加按钮，最多可添加5个接收邮箱').css({ color: 'Gray' });
            });
            var checkLabel = document.createElement('label');
            var mailp = document.createElement('p');
            $(mailp).css({ marginTop: 10, marginLeft: 0 }).append(mailLabel).append(mailInput).append(cancelButtn).append(checkLabel);
            $(obj).parent().parent().append(mailp);//拼接标签组成要实现的html代码和相应的属性

}

本次主要学习动态添加文本输入框。

 

转载于:https://www.cnblogs.com/mu-nan/archive/2012/04/24/2468066.html