javascript——动态增加删除行-优快云博客

本文将介绍如何使用Java Server Pages (JSP) 技术创建动态网页，并演示了一个简单的表单处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>