Bootstrap,关于table表格中点击一个按钮获取该行的某一列的值并将其传到模态框的问题解决方法_table点击按钮获取该td值-程序员宅基地

技术标签: Web前端  

先看部分相关代码:
table表格中点击一个按钮:

<button type="button" class="btn btn-info" data-toggle="modal"
					data-target="#myModall">表格中的按钮</button>

触发模态弹出窗元素data-target,这个关键,对应下面弹窗的id。

点击按钮会出现弹窗,
弹窗代码:

<div class="modal " id="myModall" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">文件类型</h4>
					</div>
					<div class="modal-body">
						<form action="/" method="POST">
							<div class="form-group">
								<label for="user_id" class="col-sm-4 control-label">当前磁盘分区</label>
								<div class="col-sm-8">
									<input style="width: 100px;" type="text" class="form-control"
										name="aa" value="" id="aa" readonly>
										//我们把表格中的值通过js,放在这个input的value里。注意id, 
										// 结尾使用readonly,把输入框变为只读,禁止输入,不要使用disbled禁止输入,这个属性会导致这个输入框不能被调用。
								</div>
							</div>
							<div class="form-group">
								<label for="user_id" class="col-sm-4 control-label">文件类型选择</label>
								<div class="col-sm-8">
									<select style="width: 100px;">
										<option value="ext2">ext2</option>
										<option value="ext3">ext3</option>
										<option value="vfat">vfat</option>
										<option value="ext4">ext4</option>
									</select> <input type="hidden" id="hidden" name="hidden" value=""
										placeholder="文件系统类型" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary">确认修改</button>
						<span id="tip"> </span>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

配合js
在点击按钮,触发弹窗的同时,这时也会触发js。

	$('#myModall').on('show.bs.modal', function (event) {
            $("textarea[name = refuseTextareaContext]").innerHTML = "";
            var btnThis = $(event.relatedTarget); //触发事件的按钮
            var modal = $(this);  //当前模态框
            var modalId = btnThis.data('id');   //解析出data-id的内容
            currentDataId = btnThis.closest('tr').find('td').eq(0).text();//获取某一列的内容eq后面表示列数
            $("#aa").val(currentDataId);
        });

js里面的弹窗id和存放数值的id,要对应好。

代码仅供参考,可根据自己实际功能需求此套用方法。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wen_284334906/article/details/100568600

智能推荐

TensorFlow模型保存的一个坑_savedmodel load for tags { serve }; status: fail: -程序员宅基地

文章浏览阅读2.7k次。最近工作需要,使用tensorflow(r1.3)中contrib的某个库,根据tf官网的说法,go版本是只能调用py版本训练好的模型,而个人对go比较熟且线上环境用go作服务,所以想用go调python训练好的模型。使用python import tf和tf.contrib相关库,使用tf.saved_model.builder.SavedModelBuilder保存模型,但使用go使用LoadS_savedmodel load for tags { serve }; status: fail: not found: op type not reg

Java 流(Stream)、文件(File)和IO_file流有哪些?-程序员宅基地

文章浏览阅读302次。出处:https://www.cnblogs.com/flyins/p/5746196.html[---------------------Stream-----------------------]首先,流是什么?流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行。设备可以是文件,网络,内存等。[左图]流具有方向性,至于是输..._file流有哪些?

npm安装vue的权限问题解决_error: eacces: permission denied, symlink '../lib/-程序员宅基地

文章浏览阅读1.3k次。前端小白,如何运行VUE项目请参考:如何运行一个vue项目本人在安装完node.js后使用npm安装vue时遇到权限问题:Error: EACCES: permission denied, symlink '../lib/node_modules/vue-cli/bin/vue-init' -> '/usr/local/bin/vue-init'解决方法是改变npm的默认路径创建一个全局目录:mkdir ~/.npm-global配置npm使用新目录:npm config s_error: eacces: permission denied, symlink '../lib/node_modules/@vue/cli/bin/

软件工程导复习分析(简化版,不够详细,有干货)_软件系统中的模块间的耦合必须最小化,-程序员宅基地

文章浏览阅读564次。一.瀑布模型 1.步骤 (1)需求分析 (2)系统设计 (3)软件编程 (4)软件测试 (5)软件维护 2.相关信息 提出者:温斯顿.罗伊斯 二.增量模型 1.简要理解 我们使用的产品,的0.1 ,1.0,2.0…… n.m版本,先将主干搭建好,再在市场或其他地方获取反馈,这时就可以,将枝叶补充 2.优点:人员分配灵活,刚开始不用投入大量的人力资源,有计划的管理技术风险 3_软件系统中的模块间的耦合必须最小化,

二叉树的简单算法题_public int xsum(treenode root)-程序员宅基地

文章浏览阅读260次。/** * * public class TreeNode { * int val; * TreeNode left; * TreeNode right; * TreeNode(int x) { val = x; } * } */class Solution { // 判断是对称二叉树 public boolean isSy..._public int xsum(treenode root)

Unity自定义UI组件(四)双击按钮、长按按钮_unityui双击-程序员宅基地

文章浏览阅读1.3w次,点赞10次,收藏41次。Unity中实现按钮双击、长击按钮,特点方便创建,容易监听,像UGUI提供的Button一样便捷,并且在不同的工程之间可以完全复用。_unityui双击

随便推点

git merge了一个分支到master之后,提交到了github,怎样在github也撤回merge。_github如何回退merge-程序员宅基地

文章浏览阅读2k次。如果你是在本地 merge 的,那你可以通过 git reflog 查看你的历史操作,然后通过 git reset --hard HEAD@{n} 回退到 reflog 里面的第 n 步然后,git push origin master -f 就可以把远程的 master 退回到之前的状态了其实,既然你是 merge 的,那么会生成一个 merge commit。你也可以先在本地 git ..._github如何回退merge

研究之美-程序员宅基地

文章浏览阅读125次。研究之美[美]D.E.Knuth(高德纳)著高博译ISBN 978-7-121-15553-62012年1月出版定价:49.00元16开204页宣传语:算法大师高德纳(Donald E.Knuth)教您如何自我发现,探索真理!中国科学院倪光南院士、微软全球副总裁张亚勤博士倾情推荐!内 容 简 介本书是计算机科学大师、“算法分析之父”高德纳(Donald ...

理解:C++重载运算符等于(=)时为什么返回的是一个引用(&)(&引用是什么意思)?_c++ 运算符=重载 为什么返回引用-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏3次。首先,我们要理解,引用(&)是什么意思?&在c语言中可以是取地址的意思。但在C++中,它有另外一种用法,即引用,这是在C++中特有的,对引用最通俗简单的理解就是取别名!我们做个简单尝试,看以下代码。**#include<iostream>using namespace std;int main{** **int a=3;** **int &b=a;** **cout<<b;** //输出 3; **b=1;** //这条语句其_c++ 运算符=重载 为什么返回引用

RN 开发遇到的问题之传参函数错误Invariant Violation: Maximum update depth exceeded.-程序员宅基地

文章浏览阅读691次。错误码:Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested u..._invariant violation: maximum update depth exceeded. this can happen when a c

python 实现自动化客户端截图_pywinauto 截图-程序员宅基地

文章浏览阅读3.6k次,点赞17次,收藏16次。1 背景实现一个客户端的自动截图,然后自动上传客户端的截图到网站中。这里不是用浏览器打开的web 无法用 selenium 等web 端自动化工具来实现,只能用客户端自动化工具。2 技术介绍2.1 pywinautopywinauto是用到的主要python库 pywinauto中文文档2.1.1 目前常用类似的python 客户端常用库PyAutoGui - 一个流行的跨平台库(具有基于图像的搜索,没有基于文本的控件操作)。Lackey - Sikuli的纯Python替代品(基于图像模式_pywinauto 截图

国内十大活跃报表 BI 产品深度点评_润乾报表跟永宏报表-程序员宅基地

文章浏览阅读399次。目前国内市场上的报表 BI 工具琳琅满目,看起来也各有特点,这给选型工作带来了一些困扰,本文就一些较活跃的报表 BI 产品进行点评,对于不太熟悉这些产品和技术的同学,可作为参考资料。这里选了十个产品,分作四类:国内报表类,国内 BI 类,国外 BI 类,国外开源报表类。每类两三种产品,在分类内大体会按面市时间为序来点评。需要强调的是,因为篇幅有限,不可能把市场上所有产品都选入,这并不意味着其它产品不好,看到结论部分时就会理解。这么分类是有意义的,同类产品大体具有相似的特征。其中,国内产品被分为报表和_润乾报表跟永宏报表