自己看DRP，然后写的一个表单-优快云博客

本文介绍了一个使用HTML和JavaScript实现的动态表格案例，通过按钮操作可在网页中添加或删除表格行，同时提供了选择学校信息的弹窗交互功能。

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

这个和尚学堂视频的功能是差不多的，不过没有像他那一样，index每次删除了以后，还需要减，但是我考虑到这在客户端执行的，index的值不可能太大，如果真大的话，是因为删除后没有减而造成的，这种可能性就更小了，所以我认为没有必要那样实现，那样代码多了，其实还在一定程度上影响性能。初学者。。。自己试着照着思路写，但是实现的功能和方法有很多是一样的。只为了以后复习..
一共两个页面：



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert Line Into Table</title>
<script type="text/javascript">

	var idFlag=0;

	function openNew(index) {
		//打开一个新窗口，并将要进行复制的输入框的id传过去，这样就能准确赋值了
		window.open("select.jsp?id="+index+"","请选择学校"," width=300 height=200 scrollbars=no");
	} 

	function addRow() {
		var myRow = mytable.insertRow(mytable.rows.length);
		var myCell =  myRow.insertCell(0);
		myCell.innerHTML = "<input />";
		myCell =  myRow.insertCell(1);
		myCell.innerHTML = "<input />";
		myCell =  myRow.insertCell(2);
		myCell.innerHTML = "<input readOnly='true' id="+idFlag+"  /><input idFlag="+idFlag+" onclick='openNew(this.idFlag)' type='button'  value='...' />";
		myCell =  myRow.insertCell(3);
		myCell.innerHTML = "<input type='button' value='删除' onclick='deleteRow(\"row"+myRow.rowIndex+"\")' />";
		//下面这个是，用于删除，为每行设定一个ID属性，这样删除的时候才能根据id找到要删除的行
		myRow.setAttribute("id","row"+myRow.rowIndex);
		idFlag ++;
	}

	function deleteRow(getString) {
		var index = mytable.rows(getString).rowIndex;
		mytable.deleteRow(index);
	}
</script>
</head>
<body align="center" >
<div align="center">
	<form>
		<table id="mytable" border="2">

			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>毕业学校</td>
				<td>处理</td>
			</tr>
		</table>
		<input type="button" onclick="addRow()" value="加入一行"/>
	</form>
</div>

</body>
</html>

下面是第二个页面，是用来选择，输入框的值的：



<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
	String id = request.getParameter("id");
 %>
<script type="text/javascript">
	function insertMsg(index) {
		var getContent = document.getElementById(index).innerHTML;
		//获取原来窗口的输入框对象，并给其赋值
		window.opener.document.getElementById("<%=id%>").value = getContent;
		window.close();
	}
</script>
</head>
<body>
<div align="center">
	请选择您就读的大学：
	<form action="">
		<table border="2px" bordercolor="red">
		<%
			for(int i=0;i<4;i++) {
		 %>
			<tr>
				<td id="<%=i %>" >
					社会大学<%=i+1 %>所
				</td>
				<td>
					<input type="checkbox" name="colleage" onclick="insertMsg(<%=i %>)"/>
				</td>
			</tr>
		<%
		}
		 %>	
		</table>
	</form>
</div>
</body>
</html>