<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计划表</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="box">
<div class="box1">
<div class="h1">添加品牌</div>
<div class="ld">ID:
<input type="text" name="" id="txt1" class="inputtxt">
品牌名称：
<input type="text" name="" id="txt2" class="inputtxt2">
<input type="button" name="" value="添加" id="btn1" class="inputbtn">
</div>
</div>
<div class="box2">
<ul id="list" class="list">
<li><span>ID</span><span>品牌名称</span><span>操作（Operation）</span> </li>
<li><span>1</span><span>宝马</span><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</div>
</body>
</html>
js
$(function () {
$('#btn1').click(function () {
var txt01 = $('#txt1').val();
var txt02 = $('#txt2').val();
var $li = $('<li><span>' + txt01 + '</span><span>' + txt02 + '</span><a href="javascript:;" class="del">删除</a></li>');
$li.appendTo('#list');
});
$('#list').delegate('a', 'click', function () {
var handler = $(this).attr('class');
switch (handler) {
case 'del':
var txt = $(this).parent().children(':first').html();
if (confirm('你确定要删除"' + txt + '"吗？')) {
$(this).parent().remove();
}
break;
}
});
});
css
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 100px;
margin: 200px auto;
border: 1px blue solid;
border-radius: 10px;
}
.box1{
width: 800px;
height: 30px;
background-color: blue;
border-radius: 3px;
}
.h1{
width: 100px;
height: 15px;
font-size: 16px;
margin-left: 20px;
color: white;
padding-top: 5px;
}
.ld{
font-size: 18px;
margin: 0 auto;
padding-top: 30px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.inputtxt, .inputtxt2{
width:250px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:30px;
line-height:30px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
width: 267px;
border: 1px #8c8c8c solid;
border-bottom: none;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
.box2{
width: 807px;
margin-top: 100px;
}
