关于学生对象的增删改查的“改”(网页界面,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">×</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">×</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');
}
六·测试
成功!
本文地址:https://blog.csdn.net/qq_44400723/article/details/109251088
上一篇: 将拖拽的img转换成获取64位base码(附原码)
下一篇: JavaScript中闭包的相关总结