表格都很常见，一般都是用table来写的，今天我就写一个dl和dd布局的表格，并往表格里添加内容，同时点击删除按钮也可以删掉表格内容。来看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{ margin:0; padding:0;}
dl{list-style: none;}
.box{ width:400px; height:40px; margin:0 auto;}
.box dl{ list-style:none;overflow: hidden;border:1px solid #e5e5e5;}
.box dl dt{background: #ff7e7e;font-size:16px;color:#fff;}
.box dl dt,.box dl dd{border-bottom:1px solid #e5e5e5;}
.box dl dd:last-child{border:none;}
.box dl dd a{background:#1E9FFF;color:#fff;padding:5px 10px;font-size: 12px;margin-left:20px;text-decoration: none;}
input{margin:10px 20px 10px 0;padding:5px 10px;border:none;outline:0;background:#1E9FFF;color:#fff;}
span{padding:10px 20px;display:inline-block;width:60px;text-align: center}
</style>
<body>
<div class="box">
<input id="btnClear" type="button" value="清空内容"/>
<input id="btnAdd" type="button" value="添加"/>
<dl>
<dt>
<span>标题</span>
<span>标题1</span>
<span>标题2</span>
</dt>
<dd>
<span>内容</span>
<span>内容</span>
<span>内容</span>
<a class="btndelte" href="javascript:void(0)">删除</a>
</dd>
<dd>
<span>内容</span>
<span>内容</span>
<span>内容</span>
<a class="btndelte" href="javascript:void(0)">删除</a>
</dd>
<dd>
<span>内容</span>
<span>内容</span>
<span>内容</span>
<a class="btndelte" href="javascript:void(0)">删除</a>
</dd>
<dd>
<span>内容</span>
<span>内容</span>
<span>内容</span>
<a class="btndelte" href="javascript:void(0)">删除</a>
</dd>
</dl>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#btnClear").on("click",function(){
$("dl dd").empty();
});
$("#btnAdd").on("click",function(){
$(‘<dd> <span>内容1</span> <span>内容1</span> <span>内容1</span> <a class="btndelte" href="javascript:void(0)">删除</a> </dd>‘).appendTo("dl")})
$("dl").on("click",".btndelte",function(){
console.log($(this).parent());
$(this).parent().empty();
})
})
</script>
</body>
</html>
这个案例主要用到的就是on绑定事件，以及appendTo事件。on绑定事件经常会用到，可以委托绑定（写选择器就是委托事件），否则就是自己绑定注册事件。
原文地址：https://www.cnblogs.com/web001/p/8463585.html
时间： 2024-11-03 14:13:30