|
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap 101 Template</title>
-
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-
- </head>
- <body>
- <div class="container-fluid" id="lm-box">
- <!-- <div class="row">
- <div class="col-md-4 text-right">
- <h5>SKU 名称</h5>
- </div>
- <div class="col-md-8">
- <div class="input-group">
- <span class="input-group-btn">
- <button class="btn btn-default" type="button">
- <span class="glyphicon glyphicon-pencil"></span>
- </button>
- </span>
- <input type="text" class="form-control" name="name" placeholder="请输入SKU名称">
- </div>
- </div>
- <div class="clearfix"></div>
- <div class="col-md-4 text-right">
- <h5>SKU 描述</h5>
- </div>
- <div class="col-md-8">
- <div class="input-group">
- <span class="input-group-btn">
- <button class="btn btn-default" type="button">
- <span class="glyphicon glyphicon-pencil"></span>
- </button>
- </span>
- <input type="text" class="form-control" name="name" placeholder="请输入SKU描述">
- </div>
- </div>
- <div class="clearfix"></div>
- <div class="col-md-4 text-right">
- <h5>单价</h5>
- </div>
- <div class="col-md-8">
- <div class="input-group">
- <span class="input-group-btn">
- <button class="btn btn-default" type="button">
- <span class="glyphicon glyphicon-pencil"></span>
- </button>
- </span>
- <input type="number" class="form-control" name="name" placeholder="单价">
- </div>
- </div>
- <div class="clearfix"></div>
- <div class="col-md-4 text-right">
- <h5>剩余库存</h5>
- </div>
- <div class="col-md-8 ">
- <div class="input-group">
- <span class="input-group-btn">
- <button class="btn btn-default" type="button">
- <span class="glyphicon glyphicon-pencil"></span>
- </button>
- </span>
- <input type="number" class="form-control" name="name" placeholder="剩余库存">
- </div>
- </div>
- <div class="text-right">
- <button type="button" class="btn btn-warning lm-del" ><span class="glyphicon glyphicon-trash"></span>删除</button>
- </div>
- </div> -->
- </div>
-
- <hr />
- <div class="text-center">
- <button type="button" id="lm-add" lm-data="0" class="btn btn-success"><span class="glyphicon glyphicon-floppy-disk"></span> 新增</button>
- </div>
-
- <script>
- var Lmadd = document.querySelector("#lm-add");
- Lmadd.onclick = function(){
- // 获取自定义属性 【注意了这个值主要为了计数】
- let a = Number( this.getAttribute('lm-add') ) ;
- let m = new DelBox(a);
- m.render();
- // 赋值
- this.setAttribute('lm-add', a+1);
- }
- function DelBox(k){
- this.k = k;
- this.interarr=[
- {name:'name'+this.k,title:'SKU 名称',type:'text',tell:'请输入SKU名称'},
- {name:'describe'+this.k,title:'SKU 描述',type:'text',tell:'请输入SKU描述'},
- {name:'price'+this.k,title:'单价',type:'number',tell:'请输入单价'},
- {name:'stock'+this.k,title:'剩余库存',type:'text',tell:'请输入剩余库存'}
- ];
- this.innerHTML=' }
- DelBox.prototype.render=function(){
- // 拼装
- for(var i=0; i<this.interarr.length; i++){
- this.innerHTML += '<div class="col-md-4 text-right">'+
- '<h5>'+this.interarr[i].title+'</h5>'+
- '</div>'+
- '<div class="col-md-8">'+
- '<div class="input-group">'+
- '<span class="input-group-btn">'+
- '<button class="btn btn-default" type="button">'+
- '<span class="glyphicon glyphicon-pencil"></span>'+
- '</button>'+
- '</span>'+
- '<input type="'+this.interarr[i].type+'" class="form-control" name="'+this.interarr[i].name+'" placeholder="'+this.interarr[i].tell+'">'+
- '</div>'+
- '</div>'+
- '<div class="clearfix"></div> }
- this.element = document.createElement('div');
- this.element.className ="row";
- this.element.innerHTML = this.innerHTML;
- // 删除按钮的父级
- this.delbox = document.createElement('div');
- this.delbox.className = "text-right";
- // 删除按钮 需要的话 自己复制第三句加class 改样式
- this.delBtn = document.createElement('button');
- this.delBtn.className = 'btn';
- this.delBtn.className += " "+'btn-warning lm-del';
- this.delBtn.innerHTML ='<span class="glyphicon glyphicon-trash"></span>删除 this.delbox.appendChild(this.delBtn);
- this.element.appendChild(this.delbox);
-
- this.box = document.querySelector("#lm-box");
- this.box.appendChild(this.element)
- // 删除自身
- var self =this;
- this.delBtn.onclick = function(){
- self.godie();
- }
- }
- // 删除
- DelBox.prototype.godie = function(){
- this.box.removeChild(this.element);
- }
- </script>
- </body>
- </html>
复制代码
这是简单的一个 添加商品 的input 选项
|
|