- The deletion of jq is to delete yourself
- The deletion of js is to delete the child through the father
- jq table add and delete
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table</title> <style> * { margin: 0; padding: 0; } .btn { text-align: center; } #add { width: 100px; height: 30px; line-height: 30px; border: none; background: #00a6ac; } .stu { width: 400px; margin: 20px auto; border: 1px solid gray; border-collapse: collapse; text-align: center; } .stu td, .stu th { border: 1px solid gray; height: 30px; } .stu tr td:last-child { text-decoration: underline; color: red; /*The mouse is a small hand style*/ cursor: pointer; } </style> </head> <body> <div class="btn"> <button id="add">添加一行</button> </div> <table class="stu"> <caption> <h1>Student Information</h1></caption> <thead> <th>name</th> <th>age</th> <th>gender</th> <th>delete</th> </thead> <tbody></tbody> </table> <script src="./jquery.min.js"></script> <script type="text/javascript"> var start = 18; $("#add").click(function() { $(".stu tbody").append("<tr><td>张三</td><td>" + start + "</td><td>女</td><td>删除</td></tr>"); start = start + 1; // add delete event //last is to get the last of all tds! ! ! ! ! console.log($(".stu tr td:last").length);//Get the selected number 1 $(".stu tr td:last").click(function() { // $(this) is the element currently registered for the event //find the parent element $(this).parent().remove(); }); }); </script> </body> </html>
jq table add and delete
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=326055975&siteId=291194637
Recommended
Ranking