自己看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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值