html中动态的增加和删除item

来源：互联网发布：python caffe 命令行编辑：程序博客网时间：2024/05/17 22:20

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

body{margin:0;font-size:24px;font-family:"微软雅黑"; color: white;}
table{width:100%; border:1px solid black; border-collapse: collapse;}
table thead tr{ height:50px;background-color:#0f0;line-height: 50px; }
table tbody tr{ height:50px;line-height: 50px; background-color:maroon;}
table tbody tr th{text-align:left; }
table thead tr th{text-align:left; }
table tbody tr:HOVER {
background-color: #63f;
}
.header{width:100%;height:50px;border:1px solid red;}
.header button{
height:50px;
width:100px;
background-color: #090;
border-radius:20px;
font-family:"华文行楷"; color: white;

}

ul{background-color: #000;width:500px;height:200px;}
table tbody .desc
{
width:100%;
height:200px;
background-color: #9c0;
}
.container{
top:0px;
left:0px;
width:100%;
height:800px;
background-color: #000;
position: fixed;
opacity:0.6;
}
.container .win{width:400px;height:500px; margin:100px auto 0 auto; background-color:#fff;opacity:1;}
p input{width:200px;height:80px; border:1px solid black; border-radius:25px;margin:50px auto 0 auto;color:green;font-size:24px;text-align:center;}
p{width:400px;color:black;height:100px; line-height: 100px}
input:HOVER {
border:2px solid green;

}
.container .win button{
height:50px;
width:100px;
background-color: #090;
border-radius:20px;
font-family:"华文行楷"; color: white;
margin-right:50px;
margin-left:50px;
margin-top:20px;

}
</style>
</head>

<body>

<div class="header"><button id="new" value="0"> 新建</button><button id="delete">删除</button></div>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" class="checkbox" value="0">人生若如初见</th>
<th>书籍</th>
<th>安意如</th>
</tr>
</tbody>
</table>
<div class="container" style="display:none;">
<div class="win">
<p>文件名:<input type="text" id="name"/></p>
<p>描   述:<input type="text" id="desc"/></p>
<p>作   者:<input type="text" id="author"/></p>
<button id="confirm"> 确定</button><button id="cancel">取消</button>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("document").ready(
function()
{
$(".checkbox").hide();
$(".container").hide();
$("#delete").on("click",
function()
{
var flag = $("#delete").attr("value");
if(flag == 1)
{
$(".checkbox").each(function()
{
if($(this).attr("value")==1)
{

$(this).closest("tr").remove();

}

});
$(".checkbox").hide();
$("#delete").text("删除");

}
else if(flag == 0)
{
$(".checkbox").show();
$("#delete").text("删除已选");

}
flag ^= 1;
$("#delete").attr("value",flag);

}
);
$(document).on("click",".checkbox",function(){
var v = $(this).attr("value");
v ^= 1;

$(this).attr("value",v);
});
$("#confirm").click(function(){

var name = $("#name").val();
var desc = $("#desc").val();
var author=$("#author").val();

var append="<tr>"+"<th>"+"<input type='checkbox' class='checkbox' value='0' style='display:none'>"+name+"</th>"+"<th>"+desc+"</th>"+"<th>"+author+"</th>"+"</tr>";

$(".container").fadeOut("slow");
$("tbody").append(append);

});
$("#cancel").click(function(){$(".container").fadeOut("slow");});
$("#new").click(function(){$(".container").fadeIn("slow");});

}
);
</script>
</body>
</html>

0 0