用jquerylib,实现表格添加内容和删除内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquerylib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#a2").on(‘click‘,‘.a1‘,function(){ $(this).closest(‘tr‘).remove(); }); $("#a3").click(function(){ var name=$("#name").val(); var age=$("#age").val(); var phone=$("#phone").val(); $("table").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+phone+"</td><td class=‘a1‘><a href=‘javascript:void(0)‘>删除</a></td></tr>"); }); }); </script> </head> <body> <center> <form class="form" action="" method="post"> 姓名: <input type="text" name="" id="name" value="" /> 年龄: <input type="number" name="" id="age" value="" /> 电话: <input type="tel" name="" id="phone" value="" /> <br /> <br /> <br /> <input type="button" value="提交" id="a3"/> </form> <table border="1" width="600" cellspacing="" cellpadding="" background="img/016.jpg" width="100" id="a2"> <tr> <th>姓名</th> <th>年龄</th> <th>电话</th> <th>操作</th> </tr> <tr> <td>瑶瑶</td> <td>8</td> <td>135444</td> <td class="a1"><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>渝儿</td> <td>24</td> <td>1356666666</td> <td class="a1"><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>傻逼</td> <td>18</td> <td>1355555555</td> <td class="a1"><a href="javascript:void(0)">删除</a></td> </tr> </table> </center> </body> </html>
原文:https://www.cnblogs.com/wzcc/p/14915541.html