動態新增、刪除每行 form 表單
阿新 • • 發佈：2019-01-04
效果圖：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <form role="form-group" style="display: inherit;width: 460px;margin-top: 20px;margin-left: 20px" id="tb"> 帳號: <input type="text" placeholder="請輸入帳號"> 密碼: <input type="password" placeholder="請輸入密碼"> <img src="add.png" alt="" onclick="add()" style="width:30px"> </form> <div class="btn btn-default" style="margin-top: 20px;margin-left: 200px">提交</div> </body> </html> <script> function add() { var form = document.createElement("form-group"); form.id = new Date().getTime(); form.innerHTML = "<form role='form-group' style='display: inherit;width: 550px'>" + "帳號: " + "<input placeholder='請輸入帳號'/>" + " 密碼: <input placeholder='請輸入密碼'/>" + "<img src='del.png'onclick='del(this)' style='width:30px'></form>"; document.getElementById("tb").appendChild(form); } function del(obj) { var formID = obj.parentNode.parentNode.id; var form = document.getElementById(formID); document.getElementById("tb").removeChild(form); } </script>