使用javascript将数据从表行导入引导模式

使用javascript将数据从表行导入引导模式,javascript,jquery,html,twitter-bootstrap,bootstrap-modal,Javascript,Jquery,Html,Twitter Bootstrap,Bootstrap Modal,我正在使用引导表和引导模式,我需要在模式加载时在引导模式中显示行数据,我正在使用JS加载引导模式,如何使用java脚本或jquery将数据获取到模式中 我们可以使用数据id概念将数据导入引导模式,还是更好地使用Jquery? 整行值应显示在模式中 表格HTML <table id="example" class="table table-striped table-bordered nowrap"> <thead> <tr> <th>HQ&

我正在使用引导表和引导模式,我需要在模式加载时在引导模式中显示行数据,我正在使用JS加载引导模式,如何使用java脚本或jquery将数据获取到模式中

我们可以使用数据id概念将数据导入引导模式,还是更好地使用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>
并将一些类添加到您的表中

 ...
  <td class="invoice-amt">Rs.21,239</td>
  <td>22-10-2017</td>
  <td>INV-368</td>
  <td class="cheque-amt">Rs.2124</td>
 ...
玩得开心:)

p、 美国的假设:

  • 表数据是静态的,不是来自服务器数据或json
jsfiddle

并将一些类添加到您的表中

 ...
  <td class="invoice-amt">Rs.21,239</td>
  <td>22-10-2017</td>
  <td>INV-368</td>
  <td class="cheque-amt">Rs.2124</td>
 ...
玩得开心:)

p、 美国的假设:

  • 表数据是静态的,不是来自服务器数据或json
jsfiddle

“如何使用java脚本或jquery将数据导入模式”什么数据?表中存在的静态数据“如何使用java脚本或jquery将数据导入模式”什么数据?表中存在的静态数据非常感谢@Sudarpo chunggreat dude。上帝保佑你。非常感谢@Sudarpo,伟大的家伙。上帝保佑你。
  <button class="btn btn-icon btn-primary btn-xs" id="myBtn">Close</button>
<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>
 ...
...
<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);
});