[英]Data into bootstrap modal from table row using javascript
I am using a bootstrap table and bootstrap modal, I need the row data to shown in the bootstrap modal on modal loading,Am using JS to load the bootstrap modal, how can i get the data into the modal using java script or jquery 我正在使用引导程序表和引导程序模态,我需要在模式加载时将行数据显示在引导程序模态中,使用JS来加载引导程序模态,如何使用Java脚本或jquery将数据放入模态
Can we use data-id concept to get the data into the bootstrap modal or better to use Jquery? 我们可以使用data-id概念使数据进入引导程序模式还是更好地使用Jquery? The entire row values should be displayed in the modal 整个行的值应以模式显示
Table HTML 表格HTML
<table id="example" class="table table-striped table-bordered nowrap">
<thead>
<tr>
<th>HQ</th>
<th>STOCKIEST</th>
<th>CHEMIST</th>
<th>INVOICE NUMBER</th>
<th>INVOICE AMOUNT</th>
<th>INVOICE DATE</th>
<th>INVOICE IMAGE</th>
<th>CHEQUE AMOUNT</th>
<th>CHEQUE IN FAVOUR OF</th>
<th>CHEQUE NUMBER</th>
<th>CHEQUE DATE</th>
<th>BANK'S NAME</th>
<th>COURIER NAME</th>
<th>STATUS</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyderabad</td>
<td>Balaji Pharmacon</td>
<td>Sanjeevan Medical</td>
<td>368</td>
<td>Rs.21,239</td>
<td>22-10-2017</td>
<td>INV-368</td>
<td>Rs.2124</td>
<td>Santhosh Kudalkar</td>
<td>531034</td>
<td>22-11-2017</td>
<td>IDBI</td>
<td>DTDC</td>
<td>Approved</td>
<td class="text-center">
<button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
</td>
</tr>
<tr>
<td>Hyderabad</td>
<td>Balaji Pharmacon</td>
<td>Sanjeevan Medical</td>
<td>743</td>
<td>Rs.21,245</td>
<td>21-10-2017</td>
<td>INV-743</td>
<td>Rs.2124</td>
<td>Santhosh Kudalkar</td>
<td>531035</td>
<td>22-11-2017</td>
<td>IDBI</td>
<td>DTDC</td>
<td>Approved</td>
<td class="text-center">
<button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
</td>
</tr>
</tbody>
Modal: 模态:
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Cheque Confirmation</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-4 control-label">Invoice Amount</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">Cheque Amount</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">Cheque Number</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" Placeholder="Enter Cheque Number" onkeypress="return isNumber(event)">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">Name of the Bank</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" value="IDBI">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">Name of the Courier</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" value="DTDC">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label">Cheque Date</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" placeholder="mm/dd/yyyy" value="11/23/2017" id="datepicker">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info waves-effect waves-light">Confirm and Approve</button>
<button type="button" class="btn btn-primary waves-effect waves-light">Close</button>
</div>
</div>
</div>
Modal JS: 模态JS:
$(document).ready(function(){
$("#myBtn").click(function(){
$("#con-close-modal").modal();
});
});
<button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
Slight problem with your html, you have button with duplicate ID --> myBtn
. html出现问题,您的按钮具有重复的ID- --> myBtn
。
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? 是否有一堆按钮都触发相同的模式,但内容略有不同? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. 使用event.relatedTarget和HTML data- *属性(可能通过jQuery)来根据单击哪个按钮来更改模式的内容。 See the Modal Events docs for details on relatedTarget, 有关relatedTarget的详细信息,请参见“模态事件”文档,
From boostrap 3 docs, you have event.relatedTarget
to play with. 在boostrap 3文档中,您可以使用event.relatedTarget
。
https://getbootstrap.com/docs/3.3/javascript/#modals-related-target https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
Change your modal trigger to 将模态触发器更改为
<td class="text-center">
<button class="btn btn-icon btn-primary btn-xs"
data-toggle="modal"
data-target="#con-close-modal" >Close</button>
</td>
And add some class to your table 并在表中添加一些类
...
<td class="invoice-amt">Rs.21,239</td>
<td>22-10-2017</td>
<td>INV-368</td>
<td class="cheque-amt">Rs.2124</td>
...
Modify your modal html too, to add class on your desired input 也修改您的模态html,以在所需的输入上添加类
...
<input type="text" class="form-control input-sm cheque-amt" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)">
...
...
<input type="text" class="form-control input-sm invoice-amt" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)">
...
Add this event handler 添加此事件处理程序
$('#con-close-modal').on('show.bs.modal', function (e) {
var _button = $(e.relatedTarget);
// console.log(_button, _button.parents("tr"));
var _row = _button.parents("tr");
var _invoiceAmt = _row.find(".invoice-amt").text();
var _chequeAmt = _row.find(".cheque-amt").text();
// console.log(_invoiceAmt, _chequeAmt);
$(this).find(".invoice-amt").val(_invoiceAmt);
$(this).find(".cheque-amt").val(_chequeAmt);
});
Have fun :) 玩得开心 :)
ps Assumptions: ps假设:
jsfiddle jsfiddle
https://jsfiddle.net/sudarpochong/nxL8jezp/ https://jsfiddle.net/sudarpochong/nxL8jezp/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.