js 动态添加多表单控件 div

转载 2012年03月26日 20:48:32
动态创建div层:
document.write("<div id='popupmenu'>...</div>);
清除层内容:
document.getElementById("popupmenu").innnerHTML="";
jssay (初级程序员) 2009-10-15
div遮罩层嘛
http://www.windsfly.cn/blog/default.asp?id=660
http://www.cnblogs.com/wjfluisfigo/archive/2009/01/15/1359309.html
 
 

<script type="text/javascript">
 var p=1;
function CreateUpload()
    {
        p++;
        var div=document.createElement('div');
        var html='<img  id=img_view'+p+' style="width: 90px; height: 90px; float: left;margin: 5px;display:none;" />'
         + '<div style="float: left;">'
         +'  类型:<select name="types" id="types'+p+'"><option value="1">荣誉证书</option><option value="2">环境风光</option>'
         +'<option value="3">公共设施</option><option value="4">温馨卧室</option><option value="5">精彩活动</option></select><br />'
         +' 标题:<input type="text" name="imgTitle" id="imgTitle'+p+'" size="30" value="" /><br />'
         +' 图片:<input type="text" readonly="readonly" id="ReviewPic'+p+'" name="ReviewPic" value=""  style="width: 270px;" />'
         +'<input type="button" value="我要上传" onclick="document.getElementByIdx_x_x(\'frmReviewPic'+p+'\').style.display=(document.getElementByIdx_x_x(\'frmReviewPic'+p+'\').style.display == \'\' ? \'none\' : \'\')" />'
         +'<iframe name="frmReviewPic" id="frmReviewPic'+p+'" frameborder="0" cellpadding="0" width="480"'
         +' height="30" scrolling="no" src="../uploadfile.aspx?space=0&bgcolor=e6eff8&size=35&input=ReviewPic'+p+'"'
         +'bgcolor="#ffffff" style="display: none"></iframe><br />'
         +'描述:<textarea cols="60" rows="2" name="Description" id="Description'+p+'" class="inputtext"></textarea><a href="javascript:" onclick="RemoveAdd('+p+')">[-]删除</a></div>';
div.innerHTML=html;
div.style.width="780px";
div.style.marginTop="10px";
div.setAttribute("id","upDiv"+p);
//div.id="upDiv"+p;
document.getElementById('uppics').appendChild(div);
    }
function sub()
    {
       var ReviewPic=document.getElementsByName("ReviewPic");
       var Description=document.getElementsByName("Description");
       var imgTitle=document.getElementsByName("imgTitle");
       //alert(o.length);
       for(var i=0;i<ReviewPic.length;i++)
       {
          if(imgTitle[i].value=="")
          {
            alert("您有没有标题的图片上传,请填写标题!");
            imgTitle[i].focus();
            return false;
          }
          if(imgTitle[i].value.length>15)
          {
            alert("第"+(i+1)+"张图片的标题过长,请您更正!");
            imgTitle[i].focus();
            return false;
          }
          if(ReviewPic[i].value=="")
          {
            alert("第"+(i+1)+"张图片没有上传!");
            return false;
          }
       }
      return true;
    }
function RemoveAdd(id)
{
 var div=document.getElementById('upDiv'+id);
 var div2=document.getElementById('uppics');
 div2.removeChild(div);
}  
    </script>

<html>
<head>
</head>
<body>
<div style="width: 100%;" id="uppics">
                                            <div style="width: 100%;" id="upDiv1">
                                                <img id="img_view1" style="width: 90px; height: 90px; float: left; margin: 5px; display: none;" />
                                                <div style="float: left;">
                                                    类型:<select name="types" id="types1"><option value="1">荣誉证书</option>
                                                        <option value="2">环境风光</option>
                                                        <option value="3">公共设施</option>
                                                        <option value="4">温馨卧室</option>
                                                        <option value="5">精彩活动</option>
                                                    </select><br />
                                                    标题:<input type="text" name="imgTitle" id="imgTitle1" value="" size="30" /><br />
                                                    图片:<input type="text" readonly="readonly" id="ReviewPic1" name="ReviewPic" value="" style="width: 270px;" />
                                                    <input type="button" value="我要上传"  onclick="document.getElementByIdx_x_x('frmReviewPic1').style.display=(document.getElementByIdx_x_x('frmReviewPic1').style.display == '' ? 'none' : '')" />
                                                    <iframe name="frmReviewPic" id="frmReviewPic1" frameborder="0" cellpadding="0" width="480"
                                                        height="30" scrolling="no" src="../uploadfile.aspx?space=0&bgcolor=e6eff8&size=35&input=ReviewPic1"
                                                        bgcolor="#ffffff" style="display: none"></iframe>
                                                    <br />
                                                    描述:<textarea cols="60" rows="2" name="Description" id="Description1" class="inputtext"></textarea>
                                                </div>
                                                <input style="float: left;" class="botton" type="button" onclick="CreateUpload()"
                                                    value="[+]继续添加" />
                                            </div>
                                        </div>
          </body>
<html>


 

JS动态添加div,然后在div中添加元素

需求:    组织部中有个这样的需求,根据年份动态显示该年份下的定性指标!   我的做法:         先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。 代码:  空的d...
  • u013036959
  • u013036959
  • 2016年04月09日 14:57
  • 25223

javascript动态添加div

网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。 前台代码 js动态添加div 获得question下的...
  • lypf19900912
  • lypf19900912
  • 2014年03月28日 20:46
  • 2336

js动态添加div(三)

动态添加Div,并删除某个Div
  • Cike121272604
  • Cike121272604
  • 2010年08月13日 11:30
  • 18336

JS实现动态添加和删除DIV

前言 在做项目的过程中,做到关于添加个人的教育这一块的时候,需要使用动态添加和删除div的操作。这个大家应该不陌生,在很多网站注册的时候都会要求对于自己的教育的经历进行完善。如下图 实...
  • chenfanglincfl
  • chenfanglincfl
  • 2013年12月03日 11:32
  • 7449

js 动态创建div并向其中添加元素

CSS样式文件search_history.cssdiv{ width:95%; height:40px; vertical-align: middle; line-h...
  • zcn596785154
  • zcn596785154
  • 2017年09月21日 18:14
  • 178

动态往div里添加img

在id=path1的div里面动态的加载img标签。
  • a6821122
  • a6821122
  • 2015年06月16日 17:58
  • 3902

js 向 div 动态 添加 内容 table

/** * @author heardy * @time 2011/02/11 * @version 1.0 */ 设置style="height:28px" 预留位置...
  • heardy
  • heardy
  • 2011年02月11日 10:58
  • 14165

js创建div,span,label

var newdiv=document.createElement("div");             newdiv.className="switch-animate switch-on" ...
  • shaobingj126
  • shaobingj126
  • 2013年12月27日 08:49
  • 6509

js动态创建和删除div

研究了一下js的动态生成div功能。特此一记: var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.styl...
  • goodluck_mh
  • goodluck_mh
  • 2017年01月20日 16:43
  • 2227

JavaScript表单控件

在 JavaScript 中,form表单对应的是HTMLForm-Element类型,继承了HTMLElement因而与其他HTML元素具有相同的默认属性。form元素独有的属性和方法包括:    ...
  • jarniyy
  • jarniyy
  • 2017年04月01日 17:12
  • 290
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 动态添加多表单控件 div
举报原因:
原因补充:

(最多只允许输入30个字)