div點選按鈕增加一行
阿新 • • 發佈：2019-02-03
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function addLine(addBut){ var divElements =document.getElementsByName("delete"); if(divElements.length<5){ var divElement =document.createElement("div"); var input1 = document.createElement("input"); input1.type="file"; input1.name="upFile"; input1.name="delete"; var input2 = document.createElement("input"); input2.type="button"; input2.value="刪除"; input2.onclick=function(){ var divElemnet = this.parentNode.parentNode; divElemnet.removeChild(this.parentNode); addBut.disabled=false; } divElement.appendChild(input1); divElement.appendChild(input2); var outDivElement = document.getElementById("outDiv"); outDivElement.appendChild(divElement); if(divElements.length==5){ addBut.disabled=true;} } } </script> </head> <body> <form action="${pageContext.request.contextPath }/UploadServlet" method="post" enctype="multipart/form-data"> <table border="1" align="center"> <caption> 檔案上傳 </caption> <tr> <th> 上傳使用者 </th> <td> <input type="text" name="username" /> </td> </tr> <tr> <th></th> <td> <div id="outDiv"> </div> </td> </tr> <tr> <th> </th> <td><input type="button" value="新增上傳檔案" id="addBut" onclick="addLine(this)"/></td> </tr> <tr><td colspan="2" align="center"><input type="submit" value="上傳"/></td></tr> </table> </form> </body> </html>