<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="max">
<div class="head">
<div class="write">添加品牌</div>
</div>
<div class="head2">
<span>ID:</span>
<input type="text" name="" id="txt">
<span class="span2">品牌名稱:</span>
<input type="text" name="" id="txt1">
<input type="button" name="" value="添加" class="btn" id="btn">
</div>
</div>
<div class="min">
<ul id="list" class="list">
<li class="li">ID</li>
<li class="li-1">品牌名稱</li>
<li class="li-2">操作（Operation）</li>
<li class="li-3">1</li>
<li class="li-4">奔馳</li>
<li class="li-5">
<a href="#" class="del">刪除</a>
</li>
</ul>
</div>
</body>
</html>
js
$(function () {
$('#btn').click(function () {
var txt = $('#txt').val() && $('#txt1').val();
var $li = $('<li class="li-3">' + txt + '</li>\n' +
' <li class="li-4">' + txt + '</li>\n' +
' <li class="li-5">\n' +
' <a href="#" class="del">刪除</a>\n' +
' </li>');
if (txt == '') {
alert('請輸入內(nèi)容');
return;
}
$li.appendTo('#list')
});
/* $('.del').click(function () {
$(this).parent().remove();
})*/
$('#list').delegate('a', 'click', function (event) {
var handler = $(this).attr('class');
switch (handler) {
case 'del':
$(this).parent().remove();
break;
}
})
});
