这个和尚学堂视频的功能是差不多的,不过没有像他那一样,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>