Bootstrap 模态框(Modal)插件数据传值

模态框具体代码如下:




单击编辑图标时触发模态框,并将此行数据传入模态框。


传入后如下:



具体传值方法如下

//触发模态框的同时调用此方法
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;方式可以获取。

转载于:https://www.cnblogs.com/baalhuo/p/5762113.html

你可能感兴趣的:(Bootstrap 模态框(Modal)插件数据传值)