一个可增删的表格
一个可增删的表格,jquery 自引。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个可增加删除的表格</title> <script type="text/javascript" src="__PUBLIC__/frontend/sp/js/jquery-1.8.3.min.js"></script> <script src="jquery.min.js"></script> </head> <style> .dabox { width: 80%; margin: 0 auto; } .title{ width:100%; text-align:center; font-size:24px; margin-bottom:15px; } table { margin: 0 auto; width:100%; } table td { background: #FFF; padding: 8px 8px; text-align: center; } .delebtn{ width: 60px; height: 25px; text-align: center; line-height: 25px; font-size: 16px; color: #64b6ee; background: #fff; border: 1px solid #64b6ee; cursor: pointer; display: block; border-radius: 5px; margin:0 auto; } .submit { width: 400px; height: 50px; text-align: center; line-height: 50px; font-size: 20px; color: #fff; background: #64b6ee; margin: 40px auto 20px; border: none; display: block; border-radius: 5px; } .add{ width: 250px; height: 50px; text-align: center; line-height: 50px; font-size: 20px; color: #64b6ee; background: #fff; border: 1px solid #64b6ee; margin: 40px auto 20px; display: block; border-radius: 5px; outline: none; cursor: pointer; } .add:active{ background: rgba(100,182,283,0.2) ; -webkit-tap-highlight-color:transparent; } </style> <body> <div class="dabox"> <div style="height:80px;"></div> <div class="title">一个可增加删除的表格</div> <form action="" method=""> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>一号</td> <td>二号</td> <td>三号</td> <td>四号</td> <td>五号</td> <td>删除</td> </tr> <tr> <td> <input type="text" value="嘿嘿" name="yiname[]"> </td> <td> <input type="text" value="嘿嘿" name="ername[]"> </td> <td> <input type="text" value="嘿嘿" name="sanname[]"> </td> <td> <input type="text" value="嘿嘿" name="siname[]"> </td> <td> <input type="text" value="嘿嘿" name="wuname[]"> </td> <td> <div class="delebtn" onclick="dele(this)">删除</div> </td> </tr> <tr> <td> <input type="text" value="嘿嘿" name="yiname[]"> </td> <td> <input type="text" value="嘿嘿" name="ername[]"> </td> <td> <input type="text" value="嘿嘿" name="sanname[]"> </td> <td> <input type="text" value="嘿嘿" name="siname[]"> </td> <td> <input type="text" value="嘿嘿" name="wuname[]"> </td> <td> <div class="delebtn" onclick="dele(this)">删除</div> </td> </tr> <tr class="btInfo"> <td colspan="5">哈哈</td> </tr> </table> <input type="submit" value="提交" class="submit"> <input type="button" value="添加" class="add" onclick="addList()"> </form> <div style="height:80px;"></div> </div> </body> </html> <script> // 添加事件 function addList(){ var addhtml=`<tr> <td> <input type="text" value="嘿嘿" name="yiname[]"> </td> <td> <input type="text" value="嘿嘿" name="ername[]"> </td> <td> <input type="text" value="嘿嘿" name="sanname[]"> </td> <td> <input type="text" value="嘿嘿" name="siname[]"> </td> <td> <input type="text" value="嘿嘿" name="wuname[]"> </td> <td> <div class="delebtn" onclick="dele(this)">删除</div> </td> </tr>`; // var addhtml=' <tr>\n' + // ' <td><input type="text" value="" name="yiname[]"></td>\n' + // ' <td><input type="text" value="" name="ername[]"></td>\n' + // ' <td><input type="text" value="" name="sanname[]"></td>\n' + // ' <td><input type="text" value="" name="siname[]"></td>\n' + // ' <td><input type="text" value="" name="wuname[]"></td>\n' + // ' <td class="dele"><div class="delebtn" onclick="dele(this)">删除</div></td>\n' + // ' </tr>'; $('.btInfo').before(addhtml); } // 删除事件 function dele(obj) { $(obj).parents("tr").remove(); } </script>