表格删除
布局：
div.wrap > input *2 + table
table > thead + tbody
thead > tr > th*3
tbody > tr (x4) > td (x3) > a.get
案例分析：
1，点击清空按钮，tbody全部清空，只剩下标题栏
2，点击最后一列删除的a链接，所在的一行都会删除 $(this).parent().parent()
3，点击添加按钮，会添加一行内容 $("<tr>......</tr>").appendTo("tbody") ；
4 ，注意新添加的一行也要绑定事件，点击删除可以删除当前行，所以需要事件委托
jQuery代码
$("#btnEmpty").on("click" , function(){ $("tbody").empty(); }) $("tbody").on("click" , ".delete“ , function(){ $(this).parent().parent().remove(); }) $("#btnAdd").on("click" , function(){ $("<tr> <td>jQuery</td> <td>信息工程学院</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr>") .appendTo("tbody"); })
完整代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "΢ÈíÑźÚ"; color: #fff; } td { font: 14px "΢ÈíÑźÚ"; } td a.delete { text-decoration: none; } a.delete:hover { text-decoration: underline; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } /*.btnAdd {*/ /* width: 110px;*/ /* height: 30px;*/ /* font-size: 20px;*/ /* font-weight: bold;*/ /*}*/ .form-item { height: 100%; position: relative; padding-left: 100px; padding-right: 20px; margin-bottom: 34px; line-height: 36px; } .form-item > .lb { position: absolute; left: 0; top: 0; display: block; width: 100px; text-align: right; } .form-item > .txt { width: 300px; height: 32px; } .mask { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0.15; display: none; } .form-add { position: fixed; top: 30%; left: 50%; margin-left: -197px; padding-bottom: 20px; background: #fff; display: none; } .form-add-title { background-color: #f7f7f7; border-width: 1px 1px 0 1px; border-bottom: 0; margin-bottom: 15px; position: relative; } .form-add-title span { width: auto; height: 18px; font-size: 16px; font-family: ËÎÌå; font-weight: bold; color: rgb(102, 102, 102); text-indent: 12px; padding: 8px 0px 10px; margin-right: 10px; display: block; overflow: hidden; text-align: left; } .form-add-title div { width: 16px; height: 20px; position: absolute; right: 10px; top: 6px; font-size: 30px; line-height: 16px; cursor: pointer; } .form-submit { text-align: center; } .form-submit input { width: 170px; height: 32px; } </style> </head> <body> <div class="wrap"> <input type="button" value="清空内容" id="btnEmpty"> <input type="button" value="添加" id="btnAdd"> <table> <thead> <tr> <th>课程名称</th> <th>所属学院</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>JavaScript</td> <td>信息工程学院</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr> <tr> <td>css</td> <td>信息工程学院</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr> <tr> <td>html</td> <td>信息工程学院</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr> <tr> <td>jQuery</td> <td>信息工程学院</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. 找到清空按钮，注册点击事件，清空tbody $("#btnEmpty").on("click", function () { $("tbody").empty(); }); //2. 找到delete，注册点击事件 // $(".delete").on("click", function () { // $(this).parent().parent().remove(); // }); $("tbody").on("click", ".delete" , function () { $(this).parent().parent().remove(); }); //3. 找到添加按钮,注册点击事件 $("#btnAdd").on("click", function () { $('<tr> <td>jQuery111</td> <td>信息工程学院111</td> <td><a href="javascript:;" class="delete">DELETE</a></td> </tr>').appendTo("tbody"); }); }); </script> </body> </html>
