保存一个简单的面向对象编程

周大胖子 · 发表于 2018-12-27 16:41:39

<!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 选项

保存一个简单的 面向对象编程

保存一个简单的面向对象编程