计划表

作者: 我的好昵称 | 来源:发表于2019-01-14 20:08 被阅读0次

我生活的几张表
《神奇手账》
【读书清单】神奇手帐 3/1
计划表
自我计划表
2016年记忆材料索引
计划表
2019-02-15
#百日生涯营#D41/100
二三条272 总表

计划表

<!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;
}