Question

我使用的是bootstrap表和bootstrap模式，我需要在模态加载的bootstrap模式中显示行数据，使用JS加载bootstrap模式，如何使用java脚本将数据输入模态或jquery

我们可以使用data-id概念将数据导入bootstrap模式或更好地使用Jquery吗？整个行值应显示在模态

中

表格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>

模态：

<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>

模态JS：

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#con-close-modal").modal();
    });
});

Answer 1

  <button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>

您的html存在轻微问题，您的按钮上有重复的ID --> myBtn。

有一堆按钮全部触发相同的模态，只需用内容略有不同？使用event.relatedTarget和HTML数据 - * 属性（可能通过jQuery）来改变模态的内容取决于单击了哪个按钮。请参阅模态事件文档有关相关目标的详细信息，

从boostrap 3文档中，您可以使用event.relatedTarget。

https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

将模态触发器更改为

<td class="text-center">
    <button class="btn btn-icon btn-primary btn-xs" 
       data-toggle="modal" 
       data-target="#con-close-modal" >Close</button>
</td>

并在表格中添加一些课程

 ...
  <td class="invoice-amt">Rs.21,239</td>
  <td>22-10-2017</td>
  <td>INV-368</td>
  <td class="cheque-amt">Rs.2124</td>
 ...

修改你的模态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)">
...

添加此事件处理程序

$('#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);
});

玩得开心:)

P.S。假设：

您的表数据是静态的，而不是来自server-data或json

的jsfiddle
https://jsfiddle.net/sudarpochong/nxL8jezp/

使用javascript将数据导入表行的bootstrap模式

1 个答案: