有一个JSP页面,上面有一个表单(form),里面是一个表格(table 下面叫A),起初表格(A)有五行,里面是文本框(input type="text" ),当我点击这个文本框的时候弹出另一个表格(table 下面叫B),表格B是隐藏的,用JS控制显示,但是呢,这个表格B,里面存的是我从数据库里面得到的数据,而且表格第一个单元格用的是多选框(checkbox),当我勾上后,后面的数据就得到了,然后传给表格A,这一步也实现了!不能实现的就是:我选择多行的话,我就不能按照本表格的顺序,往里面插入数据了,比如说:我在表格B中选择了三行数据,表格A得到的也是这三行的数据! 这个我知道用Jquery实现的,怎么实现呢?还有没有比Jquery简单的方法,我新手!菜鸟!初学者!
解决方案 »
- hibernate映射问题。
- 那位朋友.推荐javeEE好书来..看看..我刚入门没多久..在这谢啦?
- java如何获取特殊设备信息
- 关于查询效率的一个问题
- JCreator pro 4.5的注册码
- 八个J2EE的高级群,按层次划分,共享教程代码,期待各位朋友加入(需考试)
- 有谁集成过spring+hibernate+webwork作为一个开发框架?
- 还是那个struts的问题,但问题发生了变化,很奇怪,页面没有做转向,在线等!!!
- 高分寻找介绍语音聊天的资料。
- 运行jboss,出现如下错误:javax.naming.NoInitialContextException: Cannot instantiate class: org.jnp.interf, 再线等。。
- 100分求解!!java调用第三方dll中的函数
- struts2经frameset框架传值的问题
var text;
$('#tableB').find('input:checked').each(function(){
text += " " + $(this).next().text();
});按照你的描述琢磨的情况...如果需要进一步,还得你叙述的更清楚些
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:#FFFFFF;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:16px solid orange;margin:-32px;background-color:white;z-index:1002;overflow:auto;}</style>
<script language="javascript">
function chage()
{
var proid=document.getElementById("proid").value;
var val=document.getElementById("proid").value;}
function dakai(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function guanbi(){
var proid=document.getElementById("proid").value;
var proname=document.getElementById("proname").value;
parent.document.getElementById("yuanGong").value=proid;
parent.document.getElementById("yuanGong1").value=proname;
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
</head><body>//添加对应弹出来层里面表格 的第一条记录
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<input type="text" id="yuanGong1" onclick="dakai()" size="50"><br/>//添加对应弹出来层里面表格 的第二条记录
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<input type="text" id="yuanGong1" onclick="dakai()" size="50"><br/>//添加对应弹出来层里面表格 的第三条记录
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<input type="text" id="yuanGong1" onclick="dakai()" size="50"><br/>//添加对应弹出来层里面表格 的第四条记录
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<input type="text" id="yuanGong1" onclick="dakai()" size="50"><br/>
<div id="light" class="white_content" > <table>
<form name="form1" method="post">
<tr name="tr1" onclick="chage()">
<td ><input type="checkbox" id="proid" name="proid" value="1"/></td>
<td ><input type="text" id="proname" value="1"/></td>
</tr>
<tr name="tr2" onclick="chage()">
<td ><input type="checkbox" id="proid" name="proid" value="2"/></td>
<td ><input type="text" id="proname" value="2"/></td>
<tr name="tr3" onclick="chage()">
<td ><input type="checkbox" id="proid" name="proid" value="3"/></td>
<td ><input type="text" id="proname" value="3"/></td>
</tr>
<tr name="tr1" onclick="chage()">
<td ><input type="checkbox" id="proid" name="proid" value="4"/></td>
<td ><input type="text" id="proname" value="4"/></td>
</tr>
</form>
</table><a href="javascript:void(0)" onclick="guanbi()">确定</a>
</div>
<div id="fade" class="black_overlay" ></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:#FFFFFF;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:16px solid orange;margin:-32px;background-color:white;z-index:1002;overflow:auto;}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript">function change(that)
{
/*
* tr 是你的checkbox上一级的tr object
* id 是你的checkbox的value没理解错的话你要赋值给每一行第一个input
* val 是你从数据库取到的他的名字
**/
var tr = $(that).parent().parent(),
id = $(that).val(),
val = tr.find('.proname').val(); /**
* targetId 是对应的A里面的行div的id, 这里我把每行的id写在了tr的name属性里,不是太好,你可以试着用别的办法, 但需要的是要给A 和 B每行关联起来
* Attention: 要注意的是在一个dom中id是唯一的,你不可以给好几个tag赋一个id这是行不通的
*/
var targetId = $(that).parent().parent().attr('name');
/**
* 判断是否checked,如果是赋值,如果否消值
*/
if ($(that).is(':checked')){
$('#'+targetId).find('.yuanGong').val(id);
$('#'+targetId).find('.yuanGong1').val(val);
}
else {
$('#'+targetId).find('.yuanGong').val('');
$('#'+targetId).find('.yuanGong1').val('');
}
}
function dakai(){
$('#light').css('display','block');
$('#light').css('fade','block');
}
function guanbi(){
$('#light').css('display','none');
$('#light').css('fade','none');
}
</script>
</head><body>添加对应弹出来层里面表格 的第一条记录
<div id="tr1">
<input type="text" class="yuanGong" onclick="dakai()" size="50">
<input type="text" class="yuanGong1" onclick="dakai()" size="50"><br/>
</div>
添加对应弹出来层里面表格 的第二条记录
<div id="tr2">
<input type="text" class="yuanGong" onclick="dakai()" size="50">
<input type="text" class="yuanGong1" onclick="dakai()" size="50"><br/>
</div>
添加对应弹出来层里面表格 的第三条记录
<div id="tr3">
<input type="text" class="yuanGong" onclick="dakai()" size="50">
<input type="text" class="yuanGong1" onclick="dakai()" size="50"><br/>
</div>
添加对应弹出来层里面表格 的第四条记录
<div id="tr4">
<input type="text" class="yuanGong" onclick="dakai()" size="50">
<input type="text" class="yuanGong1" onclick="dakai()" size="50"><br/>
</div>
<div id="light" class="white_content" > <table>
<form name="form1" method="post">
<tr name="tr1">
<td ><input type="checkbox" class="proid" name="proid" value="1" onchange="change(this)"/></td>
<td ><input type="text" class="proname" value="name1"/></td>
</tr>
<tr name="tr2">
<td ><input type="checkbox" class="proid" name="proid" value="2" onchange="change(this)"/></td>
<td ><input type="text" class="proname" value="name2"/></td>
<tr name="tr3">
<td ><input type="checkbox" class="proid" name="proid" value="3" onchange="change(this)"/></td>
<td ><input type="text" class="proname" value="name3"/></td>
</tr>
<tr name="tr4">
<td ><input type="checkbox" class="proid" name="proid" value="4" onchange="change(this)"/></td>
<td ><input type="text" class="proname" value="name4"/></td>
</tr>
</form>
</table><a href="javascript:void(0)" onclick="guanbi()">关闭</a>
</div>
<div id="fade" class="black_overlay" ></div>
</body>
</html>