javascript——动态增加删除行

快来打我* 2022-05-09 13:38 264阅读 0赞

<%@ page language="java" import="java.util.\*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>My JSP 'test.jsp' starting page</title>  
      
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
      
  
  </head>  
   
 <body>  
    <form action="<%=path %>/news.do?method=add" method="post" enctype="multipart/form-data">  
    <input type="hidden" name="id" value="$\{news.id \}">  
        <table width="90%" border="0" align="left" cellpadding="0" cellspacing="1" class="newTable">  
             <tr>  
                 <td colspan="2" id="more">                   
                 楼层名称<input type="text" name="name" size="30" value="111">楼层简介<input type="text" name="info" size="30" value="111"><input type="button" οnclick="addFile();" value="增加">  
                </td>  
            </tr>  
        </table>  
    </form>  
    <script type="text/javascript">  
        var t = 1;  
        function addFile()  
        \{  
            var parent = document.getElementById("more");  
            var br = document.createElement("br");  
            var charName= document.createTextNode("楼层名称")  
            var inputName = document.createElement("input");  
            var charInfo= document.createTextNode("楼层简介")  
            var inputInfo = document.createElement("input");  
            var button = document.createElement("input");  
              
            inputName.value="111";  
            inputName.type = "text";  
            inputName.name = "name\[" + (t++) + "\]";  
            inputName.size = "30";  
              
            inputInfo.value="111";  
            inputInfo.type = "text";  
            inputInfo.name = "info\[" + (t++) + "\]";  
            inputInfo.size = "30";  
              
            button.type = "button";  
            button.value = "删除";      
            button.onclick = function()  
            \{  
                parent.removeChild(br);  
                parent.removeChild(charName);  
                parent.removeChild(inputName);  
                parent.removeChild(charInfo);  
                parent.removeChild(inputInfo);  
                parent.removeChild(button);  
            \};    
            parent.appendChild(br);  
            parent.appendChild(charName);    
            parent.appendChild(inputName);  
            parent.appendChild(charInfo);  
            parent.appendChild(inputInfo);  
            parent.appendChild(button);  
        \}  
    </script>  
</body>  
</html>