关于学生对象的增删改查的“改”（网页界面，bootstrap）(续，使用模态窗的修改操作)第二种实现方式（JavaScript DOM操作）

一·前情提要

使用模态窗进行修改的第一个问题，是在修改时向用户显示的数据从哪来。因为使用模态窗就不能访问后台了。使用跳转页面是可以访问后台的，可以发起一个新的请求。那么数据就从当前页面的表格里取。

JavaScript DOM操作，可以读取网页的内容。

二·修改

复制“学生注册登记模态窗”，删除“form”，换成原来“update_student.jsp”的表单。
大致如下：

<!-- 新生修改模态窗口 -->
<div class="modal fade" tabindex="-1" id="regStuModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">学生信息修改</h5>
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form class="col-6" action="stuMgr" method="post">
					<input type="hidden" name="task" value="updateStu" />
					<!-- 学生学号也要传上去，单数不能出现在界面上，所以添加隐含域 -->
					<input type="hidden" name="stuno" value="${stu.stuNo}" />
					<div class="form-group">
						<label>学生学号:${stu.stuNo}</label>
						<!-- 学号是不可修改的 -->
					</div>
					<div class="form-group">
						<label>学生姓名:</label> <input type="text" class="form-control"
							name="stuname" value="${stu.stuName}">
						<!-- 用EL表达式来回填的 -->
					</div>
					<div class="form-group">
						<label>学生成绩:</label> <input type="text" class="form-control"
							name="stumark" value="${stu.stuMark}">
					</div>
					<button type="submit" class="btn btn-primary">信息修改</button>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary"
					data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" onclick="regStu()">确认修改</button>
			</div>
		</div>
	</div>
</div>

三·测试模态窗

不访问后台就不能这样写了。

稍作修改，先测试模态窗能不能弹出：

	<!-- 新生修改模态窗口 -->
	<div class="modal fade" tabindex="-1" id="updateStuModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">学生信息修改</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form class="col-6" action="stuMgr" method="post">
						<input type="hidden" name="task" value="updateStu" />
						<!-- 学生学号也要传上去，单数不能出现在界面上，所以添加隐含域 -->
						<input type="hidden" name="stuno" value="" />
						<div class="form-group">
							<label>学生学号:</label>
							<!-- 学号是不可修改的 -->
						</div>
						<div class="form-group">
							<label>学生姓名:</label> <input type="text" class="form-control"
								name="stuname" value="">
							<!-- 用EL表达式来回填的 -->
						</div>
						<div class="form-group">
							<label>学生成绩:</label> <input type="text" class="form-control"
								name="stumark" value="">
						</div>
						<button type="submit" class="btn btn-primary">信息修改</button>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="">确认修改</button>
				</div>
			</div>
		</div>
	</div>

添加脚本：

测试：

可行。

四·获取按钮所在行的信息，将其填充到模态窗中

每次点击按钮都不一样，所以要把按钮传进去。

1·找到按钮的父元素

按钮：

<td>是按钮的父元素：

试着把父元素拿出来：

进入网页->右键->“检查”：

点击“修改”：

找到按钮所在的<td>但是还是不够的：

要找到<td>的兄弟，就要继续寻找父元素：


找到了<tr>，<td>的父元素是<tr>，找到<tr>之后才能回来找到这几个<td>：

查询文档：

childNode包含文字和注释，是我们不需要的东西，不够纯净，那么用“children”回来找按钮的兄弟结点：

“btn.parentNode.parentNode”的所有子元素都构成一个“children”数值，“children[0]”是第一个：

OK！

2·给表单元素赋值

要给元素赋值，需要先找到表单
给表单起个名字：

查看要给哪些元素赋值：

完善脚本，代码如下：

function showUpdateDlg(btn){
	/* 在模态窗显示之前要进行一些操作 */
	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
	/* $('#updateStuModal').modal('show'); */
	/* 创建变量 */
	var elements = btn.parentNode.parentNode.children;
	
		var frm = document.forms['updateStuFrm'];

	
	frm.stuno = elements[0].innerText;
	frm.stuname = elements[1].innerText;
	frm.stumark = elements[2].innerText;

	
	$('#updateStuModal').modal('show');
	
}

测试：

数据还没进来。
调试：

写成了给主键赋值。
修改:

function showUpdateDlg(btn){
	/* 在模态窗显示之前要进行一些操作 */
	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
	/* $('#updateStuModal').modal('show'); */
	/* 创建变量 */
	var elements = btn.parentNode.parentNode.children;
	
	var frm = document.forms['updateStuFrm'];

	
	frm.stuno.value = elements[0].innerText;
	frm.stuname.value = elements[1].innerText;
	frm.stumark.value = elements[2].innerText;
	
	$('#updateStuModal').modal('show');
	
}

测试：

再进到调试界面：

学生学号还是有问题的。
在“学生学号”添加：

完善脚本，使用jQuery的方法：

function showUpdateDlg(btn){
	/* 在模态窗显示之前要进行一些操作 */
	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
	/* $('#updateStuModal').modal('show'); */
	/* 创建变量 */
	var elements = btn.parentNode.parentNode.children;
	
	var frm = document.forms['updateStuFrm'];

	
	frm.stuno.value = elements[0].innerText;
	frm.stuname.value = elements[1].innerText;
	frm.stumark.value = elements[2].innerText;
	$("#stuno").text(elements[0].innerText);/* 使用jQuery的方法 */
	
	$('#updateStuModal').modal('show');
	
}

按钮多了一个，删除这一行：

五·实现更新

1·修改按钮

2·编写脚本

找到表单，模态窗在完成提交后隐藏。

function updateStuModal(){
	document.forms['updateStuFrm'].submit();
	$('#updateStuModal').modal('hide');    	
}

六·测试

成功！