在模態框中獲取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" οnclick="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

οnclick="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.效果圖：