表格都很常见，一般都是用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绑定事件经常会用到，可以委托绑定（写选择器就是委托事件），否则就是自己绑定注册事件。