Bootstrap 模態框(Modal)插件數據傳值


模態框具體代碼如下:

<!-- 模態框(Modal) -->
<div class="modal fade" id="update" 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">修改信息</h4>
			</div>
			<div class="modal-body">
				學號:<input type="text" name="stuno" id="stuno" /> 
				密碼:<input type="text" name="pass" id="pass"/> 
				姓名:<input type="text" name="stuname" id="stuname"/> 
				性別:<input type="radio" name="sex" class="sex" id="man" value="男"/>男
					  <input type="radio" name="sex" class="sex" id="women" value="女"/>女
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
				<button type="button" class="btn btn-primary" onclick="update()">提交更改</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>
<!-- 模態框(Modal)end -->

單擊編輯圖標時觸發模態框,並將此行數據傳入模態框。


傳入后如下:



具體傳值方法如下

//觸發模態框的同時調用此方法
function editInfo(obj) {
	var id = $(obj).attr("id");
	//獲取表格中的一行數據
	var stuno = document.getElementById("table").rows[id].cells[0].innerText;
	var pass = document.getElementById("table").rows[id].cells[1].innerText;
	var name = document.getElementById("table").rows[id].cells[2].innerText;
	var sex = document.getElementById("table").rows[id].cells[3].innerText;
	//向模態框中傳值
	$('#stuno').val(stuno);
	$('#pass').val(pass);
	$('#stuname').val(name);
	if (sex == '女') {
		document.getElementById('women').checked = true;
	} else {
		document.getElementById('man').checked = true;
	}
	$('#update').modal('show');
}
//提交更改
function update() {
	//獲取模態框數據
	var stuno = $('#stuno').val();
	var pass = $('#pass').val();
	var name = $('#stuname').val();
	var sex = $('input:radio[name="sex"]:checked').val();
	$.ajax({
		type: "post",
		url: "update.do",
		data: "stuno=" + stuno + "&pass=" + pass + "&name=" + name + "&sex=" + sex,
		dataType: 'html',
		contentType: "application/x-www-form-urlencoded; charset=utf-8",
		success: function(result) {
			//location.reload();
		}
	});
}

注:從表格中獲取數據試了幾種方法好像只有通過document.getElementById("table").rows[id].cells[0].innerText;方式可以獲取。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM