Bootstrap 模态框(Modal)插件数据传值
原文:http://blog.csdn.net/baalhuo/article/details/51178154
模态框具体代码如下:
<!-- 模态框(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[].innerText;
var pass = document.getElementById("table").rows[id].cells[].innerText;
var name = document.getElementById("table").rows[id].cells[].innerText;
var sex = document.getElementById("table").rows[id].cells[].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();
}
});
}
Bootstrap 模态框(Modal)插件数据传值的更多相关文章
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案
一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- 如何将oracle查询的结果传输给变量
如何将oracle查询的结果传输给变量 1. sqlplus查询时的变量设置 set echo off; #控制start命令不列出命令文件中的每一命令 set feedback off; #显示由查 ...
- ssh整合思想 Spring与Hibernate的整合 项目在服务器启动则自动创建数据库表
Spring整合Hibernate Spring的Web项目中,web.xml文件会自动加载,以出现欢迎首页.也可以在这个文件中对Spring的配置文件进行监听,自启动配置文件, 以及之前Struts ...
- NSCharacterSet去除字符串中的空格、删除指定\任意字符集
一.去除首尾的空格 /** 1.去除首尾的空格*/ NSString *strMsg=@" 简书作者:CoderZb "; NSString *strResult = [strMs ...
- 洛谷 P1835 素数密度
https://www.luogu.org/problemnew/show/P1835 对于40%,对每个数进行最大$O(\sqrt n)$的判断,因为n比较大所以超时. 想到线性筛,然而我们并不能筛 ...
- pandas中的随机排序和抽样
1.随机重排序 使用take()随机排序 如: df.take([54]) #采取索引为54的数据 可以借助np.random.permutation()函数随机排序 permutation()函 ...
- mysql锁机制(转载)
锁是计算机协调多个进程或线程并发访问某一资源的机制 .在数据库中,除传统的 计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是所 ...
- NodeJS基础-Buffer
Buffer用于处理二进制数据流 实例类似于整数数组,大小固定 C++代码在V8堆外分配物理内存 // 创建一个长度为10,且用0填充的Buffer const buf1 = Buffer.alloc ...
- ubuntu gcc的下载链接,比较快的。
http://mirrors.163.com/ubuntu-releases/ http://xhmikosr.1f0.de/tools/msys/
- Gym - 101775L SOS 博弈 找规律
题目:https://cn.vjudge.net/problem/Gym-101775L PS:训练赛中被这道题折磨的不轻,和队友反复推必胜态与必败态试图推导出公式或者规律,然后推的心态逐渐失控,,, ...
- poj 1742 多重背包问题 dp算法
题意:硬币分别有 A1.....An种,每种各有C1......Cn个,问组成小于m的有多少种 思路:多重背包问题 dp[i][j]表示用前i种硬币组成j最多剩下多少个 dp=-1的表示凑不齐 dp ...