在模态框中获取jsp页面表格中的数据

1.页面表格代码：

		<form:form class="form" id="userForm"
			action="${ctx}/user/queryRoomType.do" method="post"
			style="width: 900px; color:#ffffff;">
			<br />
			<table class="welcometable" id="tb">
				<tr height="30px">
					<td width="160px" align="center">客房房间类型</td>
					<td width="130px" align="center">房间床位数目</td>
					<td width="130px" align="center">客房房间价格</td>
					<td width="130px" align="center">预定折扣系数</td>
					<td width="150px" align="center">按时收费比例系数</td>
					<td width="200px" align="center">操作</td>
				</tr>
				<%
					PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
						List list = pageInfo.getList();
						for (int i = 0; i < list.size(); i++) {
							RoomType roomType = (RoomType) list.get(i);
				%>
				<tr height="28px">
					<td align="center"><%=roomType.getRoomTypeName()%></td>
					<td align="center"><%=roomType.getBedNumber()%></td>
					<td align="center"><%=roomType.getRoomPrice()%></td>
					<td align="center"><%=roomType.getDiscountPrice()%></td>
					<td align="center"><%=roomType.getHourPrice()%></td>
					<td align="center">
						<input type="button" class="btn1" onclick="update(this)" value="修改" /> 
						<input type="button" class="btn2" id="" value="删除" />
				    </td>
				</tr>
				<%
					}
				%>

				<tr height="30px">
					<td colspan="6">
						<!-- 自定义p标签，用于分页 -->
						<div style="text-align: center;">
							<p:cxc>
							</p:cxc>
						</div>
					</td>
				</tr>
			</table>
		</form:form>

注意：注意：onclik="update(this)",这里有一个this

onclick="update(this)"

2.模态框代码：

<div class="modal fade" id="updatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel"
							style="color: black; text-align: left; font-size: 18px;">
							修改房间类型信息：</h4>
					</div>
					<div class="modal-body" style="color: black;">
						 客房房间类型：<input class="upRoom" id="roomType" type="text" value="" readonly="true" /><br /><br />
						 房间床位数目：<input class="upRoom" id="bedNumber" type="text" value="" /><br /><br />
						 客房房间价格：<input class="upRoom" id="roomPrice" type="text" value="" /><br /><br /> 
						 预定折扣系数：<input class="upRoom" id="discountPrice" type="text" value="" /><br /><br /> 
						 按时比例系数：<input class="upRoom" id="hourPrice" type="text" value="" /><br />
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-default">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
			​​
		</div>

3.js代码

function update(obj){/*点击修改按钮，给模态框加载信息并且弹出模态框*/
		var tds= $(obj).parent().parent().find('td');
		$("#roomType").val(tds.eq(0).text());
		$("#bedNumber").val(tds.eq(1).text());
		$("#roomPrice").val(tds.eq(2).text());
		$("#discountPrice").val(tds.eq(3).text());
		$("#hourPrice").val(tds.eq(4).text());
		$('#updatModal').modal({show:true})
	}

4.效果图：

相关链接：点击打开链接