Web表格怎么点击【查看】按钮弹出Div显示更多内容？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web表格怎么点击【查看】按钮弹出Div显示更多内容？相关的知识，希望对你有一定的参考价值。

如题，在点击表格中某一条数据的【查看】按钮后弹出Div，弹出的Div中显示更多未在表格中显示数据，数据来源自mysql。每一条数据Div中显示的内容均不相同，且切换内容不需要重新加载页面。
最好能提供一个Demo供参考！感激不尽！

    通过ajax局部刷新，可用第三方弹层插件来实现，如 layer.js

    在页面定义一个div 里边包含iframe  默认设置隐藏，点击查看的时候div 显示并 给iframe 的 src 重新定义  

    推荐第一种，好维护

 参考技术A 使用ajax请求 从数据库取出数据后 填充渲染到模态框 展现出来。可完成上述效果

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>
<!--必须加载jQuery文件，网上有下载-->
<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中的值了

本回答被提问者采纳

以上是关于Web表格怎么点击【查看】按钮弹出Div显示更多内容？的主要内容，如果未能解决你的问题，请参考以下文章

用jquery代码如何实现当我点击“查看”按钮时，在弹出窗口或弹出页面，显示数据库的详细数据

JQuery如何实现点击查看更多，显示更多内容

怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div

怎么查看网页保存的密码

怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div

怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div