现在的位置: 首页 > 综合 > 正文

javascript——动态增加删除行

2012年11月10日 ⁄ 综合 ⁄ 共 2651字 ⁄ 字号 评论关闭

<%@ 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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </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" onclick="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>

抱歉!评论已关闭.