1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 html,body{ 12 width: 100%; 13 height: 100%; 14 } 15 table{ 16 margin: 100px auto; 17 } 18 19 td{ 20 width: 20px; 21 height: 30px; 22 background-color: #cccccc; 23 text-align: center; 24 } 25 </style> 26 </head> 27 <body> 28 29 <input type="button" value="添加一条"> 30 <table> 31 32 <thead> 33 <td>Title1</td> 34 <td>Title2</td> 35 <td><input type="button" value="全部删除"></td> 36 </thead> 37 38 <tbody> 39 40 <tr> 41 <td>A1</td> 42 <td>A2</td> 43 <td><input type="button" value="删除"></td> 44 </tr> 45 46 <tr> 47 <td>B1</td> 48 <td>B2</td> 49 <td><input type="button" value="删除"></td> 50 </tr> 51 52 <tr> 53 <td>C1</td> 54 <td>C2</td> 55 <td><input type="button" value="删除"></td> 56 </tr> 57 58 <tr> 59 <td>D1</td> 60 <td>D2</td> 61 <td><input type="button" value="删除"></td> 62 </tr> 63 64 <tr> 65 <td>E1</td> 66 <td>E2</td> 67 <td><input type="button" value="删除"></td> 68 </tr> 69 70 <tr> 71 <td>F1</td> 72 <td>F2</td> 73 <td><input type="button" value="删除"></td> 74 </tr> 75 76 <tr> 77 <td>G1</td> 78 <td>G2</td> 79 <td><input type="button" value="删除"></td> 80 </tr> 81 82 <tr> 83 <td>H1</td> 84 <td>H2</td> 85 <td><input type="button" value="删除"></td> 86 </tr> 87 88 </tbody> 89 90 91 </table> 92 93 94 95 96 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 97 <script> 98 $(function () { 99 $("thead td input[type="button"]").click( 100 function () { 101 $("tbody tr").remove(); 102 } 103 ); 104 105 106 $("tbody td input[type="button"]").click(function () { 107 $(this).parent().parent().remove(); 108 }); 109 110 111 //为新加入的行绑定删除功能 112 $("tbody").on("click","input[value="删除"]",function () { 113 $(this).parent().parent().remove(); 114 115 }); 116 117 118 $("input[value="添加一条"]").click( 119 function () { 120 $(" <tr> " + 121 " <td>A1</td> " + 122 " <td>A2</td> " + 123 " <td><input class='added' type="button" value="删除"></td> " + 124 " </tr>").appendTo("tbody"); 125 } 126 ); 127 128 129 130 131 132 }); 133 </script> 134 135 </body> 136 </html>