html网页结构图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加商品</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="b">
<div class="b1">
<div class="b2"><span>添加商品</span></div>
<div class="b3"><span>ID:</span><input type="q" name="q" id="txt"><span>品牌名称:</span><input type="q" name="q" id="txt1"><button id='btn1'>添加</button></div>
<div class="b4" id="list">
<div class="a">
<div class="c"><span>Id</span></div>
<div class="c1"><span>品牌名称</span></div>
<div class="c2"><span>操作(Operation)</span></div>
</div>
<div class="a1">
<div class="d"><span>1</span></div>
<div class="d1"><span>奔驰</span></div>
<div class="d2"><a href="javascript:;" class="del">删除</a></div>
</div>
<div class="a2">
<div class="e"><span>2</span></div>
<div class="e1"><span>宝马</span></div>
<div class="e2"><a href="javascript:;" class="del">删除</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
css样式
*{
margin:0 ;
padding:0;
}
.b{
width: 100%;
height: 500px;
margin-top: 200px;
background-color: red;
}
.b1{
width: 800px;
height: 500px;
margin:0 auto;
background-color: white;
border:2px solid black;
}
.b2{
width: 800px;
height: 100px;
background-color:skyblue;
border-radius: 12px;
}
.b2 span{
color:white;
font-weight: bold;
font-size: 50px;
line-height: 100px;
margin-left: 291px;
}
.b3{
width: 800px;
height: 100px;
border-bottom: 2px solid skyblue;
}
.b3 span{
margin-top: 40px;
}
.b3 input{
margin-top: 40px;
height: 30px;
width: 300px;
}
.b3 button{
margin-left: 10px;
height: 35px;
width: 40px;
border-radius: 5px;
border:1px solid skyblue;
background-color: skyblue;
}
.b3 button:active{
background-color: red;
color:white;
}
.b4{
width: 800px;
height: 280px;
background-color: white;
margin-top: 20px;
}
.a{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.c{
width: 100px;
height: 40px;
float:left;
}
.c1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
}
.c2{
width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
}
.c,.c1,.c2 span{
line-height: 40px;
}
.a1{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.d{
width: 100px;
height: 40px;
float:left;
}
.d1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
}
.d2{
width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
}
.d,.d1 span{
line-height: 40px;
}
.d2 a{
text-decoration: none;
color:skyblue;
line-height: 40px;
}
.a2{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.e{
width: 100px;
height: 40px;
float:left;
}
.e1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
}
.e2{
width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
}
.e,.e1 span{
line-height: 40px;
}
.e2 a{
text-decoration: none;
color: skyblue;
line-height: 40px;
}
JS
$(function(){
$('#btn1').click(function() {
var txt = $('#txt').val();
var txt1 = $('#txt1').val();
$('#txt1').val('');
var $li =$('<div class="a2"><div class="e"><span>' + txt + '</span></div><div class="e1"><span>' + txt1 + '</span></div><div class="e2"><a href="javascript:;" class="del">删除</a></div></div>')
if (txt== ''|| txt1 == '') {
alert('请输入内容');
return;
}
$li.appendTo('#list');
});
$('.del').click(function() {
$(this).parent().remove();
});
})
