jsp页面有一个table表格，每一行最后都有一个编辑按钮，点击按钮弹出div框，并显示该行的信息，怎么做？

Posted 2023-03-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsp页面有一个table表格，每一行最后都有一个编辑按钮，点击按钮弹出div框，并显示该行的信息，怎么做？相关的知识，希望对你有一定的参考价值。

弹出的div有input还有select
用jquery实现

selectjsp，在addjsp上面有一个请选择按钮，点击请选择按钮后，弹出selectjsp页面，这个页面上是从数据库中遍历的企业，选中一条数据，点击确认，selectjsp页面关闭，并将结果带到addjsp请选择前面的文本框里面。

但name里的对象里要包含一个list，一般像你这种table的在后台肯定返回的是list集合把，所以用logic标签循环显示就行的。

&ltlogiciterate id这里的名字是随意只是在下面调用而已aList name后台返回给前台的对象比如page propertylist这里必须是list因为表示循环对象是list集合类型的indexId，indx&gt。

&lttr class=ChangeLineColor height20>。

&lttd align=center>&lt%=indx+1%&gt&lt/td&gt。

&lttd&gt，aList.productCode&lt，td&gt，alist。要的字段名字。

&lttd&gt，aList.fstCustomerName&lt，td&gt。

至于你是返回的直接是一个对象包含list集合的还是直接一个list，看你自己情况，改就行的。

参考技术A 建议你参考一下这个代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> demo </title>
<meta name="Author" content="xugang" />
<script src="js/jquery.min.js"></script>

<script type="text/javascript">
$(function()
// 点击按钮，DIV弹出，点击body任意地方隐藏div
$('#btn2').click(function()
if ( event && event.stopPropagation )
// this code is for Mozilla and Opera
event.stopPropagation();

else if (window.event)
// this code is for IE
window.event.cancelBubble = true;

$('#xiugai').show();
);
$('#bnt').click(function()
var name = $('#xg_name').val();
var age = $('#xg_age').val();
$('#name').html(name);
$('#age').html(age);
$('#xiugai').hide();
);
);
</script>
<style type="text/css">
#xiugai
position: fixed;
top: 50%;
left: 50%;
width: 240px;
height: 150px;
margin: -50px 0 0 -50px;
display: none;
border: 1px solid #666;

</style>

<body>
姓名：<span id="name">张三</span>
年龄：<span id="age">18</span>
<input id="btn2" type="button" value="修改" />
<div id="xiugai">
姓名：<input id="xg_name" type="text"/>
年龄:<input id="xg_age" type="text"/>
<input id="bnt" type="button" value="修改" />
</div>
</body>
</html> 参考技术B <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<table id="tabId"width="900" border="1" cellspacing="0">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>110</td>
<td>张三</td>
<td>女</td>
<td>20</td>
<td><input type="button" value="弹" onclick="getRowValue(this)"/></td>
</tr>
<tr>
<td>112
</td>
<td>里斯</td>
<td>男</td>
<td>19</td>
<td><input type="button" value="弹" onclick="getRowValue(this)"/></td>
</tr>
<tr>
<td>113
</td>
<td>王五</td>
<td>男</td>
<td>30</td>
<td><input type="button" value="弹"onclick="getRowValue(this)"/></td>
</tr>
</table>

<div id="divId" align="center" style="width:580px;height:160px;display:none;border:1px solid black ;" title="提升度阈值">
<table >
<tr>
<td>学号:</td>
<td>
<input type="text" id="id" style="width:160px"></input>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="name" style="width:160px"></input>
</td>
</tr>
<tr>
<td>性别:</td>
<td >
<input type="text" id="sex" style="width:160px"></input>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="text" id="age" style="width:160px"></input>
</td>
</tr>
</table>
<br>
<div align="center">
<input type="button" value="关闭" onclick="closeDiv()">
</div>
</div>
</body>
</html>
<script type="text/javascript">

//上面穿的this值得就是input
function getRowValue(element)

//设置div显示
document.getElementById("divId").style.display="";
//this做为参数传过来是方法中的element,parentNode就是获取父节点，获取了连个父节点，就相当于获取了tr
var node = element.parentNode.parentNode;
//给每一个input框赋值，node.children[0].innerHTML,node就是tr，tr的子类有多个【0】根据下标取值
document.getElementById("id").value=node.children[0].innerHTML;
document.getElementById("name").value=node.children[1].innerHTML;
document.getElementById("sex").value=node.children[2].innerHTML
document.getElementById("age").value=node.children[3].innerHTML;

function closeDiv()
//设置div关闭
document.getElementById("divId").style.display="none";

</script>追问

如果是输出到select而不是input呢？

追答

select拿到值后循环判断，相等就让check等于true div中的自然就是table中的值了

本回答被提问者采纳

以上是关于jsp页面有一个table表格，每一行最后都有一个编辑按钮，点击按钮弹出div框，并显示该行的信息，怎么做？的主要内容，如果未能解决你的问题，请参考以下文章

在jsp中,有一个表格table,每一行tr的第一个td都是一个checkbox,我现在要做的是把

表格样式中的 HTML/CSS 表格

excel打印标题怎么设置每页都有

在table表中，每一行里面都有一个button按钮，怎么实现点击按钮就能把该行的值传给php处理页面？

js 表格的每一行都有一个按钮点击按钮修改当前行某一列的信息

如何为表格的每一行放置一个表格