`
minh456
  • 浏览: 61697 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 动态添加 复制 删除 相同div层

    博客分类:
  • JS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>金男玉女-宝啊网-www.baoa.net </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta name="description" content="不需要闭月羞花的天使面貌,不需要杨柳细腰的魔鬼身材,只要你身材比例均匀,只要你喜欢在镜头前展示自己,只要你怀抱梦想热爱生活,我们会提供各式各样的时尚服饰供你试穿,用镜头拍摄下你最美最有自信的一面Try your best,快点加入成为我们专属的试衣天使吧!mh" />

//js  CODE:

<script>
function insert(){
    var thenew= document.createElement('li');     
    var numid= document.getElementById('ah_mh').innerHTML;
    document.getElementById('addDefault'+numid).style.display='none';
    if(document.getElementById('removeDefault'+numid)){
        document.getElementById('removeDefault'+numid).style.display='none';
    }
    var numid=parseInt(numid)+1;
   
    document.getElementById('ah_mh').innerHTML=numid;
   
    thenew.innerHTML='上传照片'+numid+':<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" onclick="insert();" id="addDefault'+numid+'">添加</a> &nbsp;<a href="javascript:void(0);" onclick="remove();" id="removeDefault'+numid+'">删除</a>'; 
    document.getElementById('s').appendChild(thenew);
}
function remove()
{
    var numid= document.getElementById('ah_mh').innerHTML;
    if(parseInt(numid)<=3){
        var numid=3;
        document.getElementById('addDefault'+numid).style.display='';
        document.getElementById('ah_mh').innerHTML=numid;     
        document.getElementById('s').removeChild(document.getElementById('s').childNodes.item(numid));
    }else{
        var numid=parseInt(numid)-1;
        document.getElementById('addDefault'+numid).style.display=''; 
        document.getElementById('ah_mh').innerHTML=numid;     
        document.getElementById('s').removeChild(document.getElementById('s').lastChild);
        document.getElementById('removeDefault'+numid).style.display='';
       }
}
</script>


</head>

<body>

//HEML CODE:

<ul> 

<li>上传照片1:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
  <li>上传照片2:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
  <li >上传照片3:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" onclick="insert();" id="addDefault3">添加</a></li>
        <div style="height:auto; overflow:hidden;" id="s"></div>//容器层
        <span id="ah_mh" style="display:none;">3</span>//计数标签

</ul>
</body>
</html>
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    JavaScript网页特效范例宝典源码

    实例279 动态移动的层 437 实例280 在页面中显示十字光标 438 第10章 状态栏特效 441 10.1 状态栏文字动画 442 实例281 使状态栏中的文字不停闪烁 442 实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边...

    超实用的jQuery代码段

    1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...

    sublime快捷键

    7添加与删除注释ctrl+/ 8将光标移动到img或background-image标签上,按下ctrl+shift+u,Emmet会自动读取图片的尺寸并添加 9数学计算表达式,输入4*8再按ctrl+shift+y,Emmet能给出最终的结果 10将图片转换成data:URL...

    枫叶贴吧程序 v2.1

    19.增加后台风格复制功能便于网友自己动手DIV 20.更换了全新的的验证码使发帖机识别更加困难 ........ 安装设置 默认管理帐号:用户名:admin,密码:admin888 首次装请修改两个默认文件: 根目录下CONN.Asp请依次...

    枫叶贴吧源码FYPost v2.1正式版

    经过近2个月的努力枫叶贴吧V2.1正式与大家见面,V2.1版本修复了2.0...19.增加后台风格复制功能便于网友自己动手DIV 20.更换了全新的的验证码使发帖机识别更加困难 ........ 后台登录:/admin 管理员:admin 密码:admin888

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持,Spring做管理,管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决...

    苹果8XPC和手机二合一完整版

    MAC.Cookie.Del(name) 删除cookie的值; name=cookie名称 MAC.AdsWrap(w,h,n) 预留广告位占位; w=宽度,h=高度,n=名称 自动加载设置项: html元素ID为history: 自动设置为鼠标移动滑入滑出 显示隐藏 历史记录。 ...

    freemarker总结

    =两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比 较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替&gt;会有更好的效果,因为 ...

Global site tag (gtag.js) - Google Analytics