title: Data into bootstrap modal from table row using javascript
body: <p>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 </p>
  
  <p>Can we use data-id concept to get the data into the bootstrap modal or better to use Jquery?
  The entire row values should be displayed in the modal</p>
  
  <p>Table HTML</p>
  
  <pre><code>&lt;table id="example" class="table table-striped table-bordered nowrap"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt;HQ&lt;/th&gt;
      &lt;th&gt;STOCKIEST&lt;/th&gt;
      &lt;th&gt;CHEMIST&lt;/th&gt;
      &lt;th&gt;INVOICE NUMBER&lt;/th&gt;
      &lt;th&gt;INVOICE AMOUNT&lt;/th&gt;
      &lt;th&gt;INVOICE DATE&lt;/th&gt;
      &lt;th&gt;INVOICE IMAGE&lt;/th&gt;
      &lt;th&gt;CHEQUE AMOUNT&lt;/th&gt;
      &lt;th&gt;CHEQUE IN FAVOUR OF&lt;/th&gt;
      &lt;th&gt;CHEQUE NUMBER&lt;/th&gt;
      &lt;th&gt;CHEQUE DATE&lt;/th&gt;
      &lt;th&gt;BANK'S NAME&lt;/th&gt;
      &lt;th&gt;COURIER NAME&lt;/th&gt;
      &lt;th&gt;STATUS&lt;/th&gt;
      &lt;th&gt;ACTIONS&lt;/th&gt;
  
  &lt;/tr&gt;
  &lt;/thead&gt;
  
  
  &lt;tbody&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Hyderabad&lt;/td&gt;
          &lt;td&gt;Balaji Pharmacon&lt;/td&gt;
          &lt;td&gt;Sanjeevan Medical&lt;/td&gt;
          &lt;td&gt;368&lt;/td&gt;
          &lt;td&gt;Rs.21,239&lt;/td&gt;
          &lt;td&gt;22-10-2017&lt;/td&gt;
          &lt;td&gt;INV-368&lt;/td&gt;
          &lt;td&gt;Rs.2124&lt;/td&gt;
          &lt;td&gt;Santhosh Kudalkar&lt;/td&gt;
          &lt;td&gt;531034&lt;/td&gt;
          &lt;td&gt;22-11-2017&lt;/td&gt;
          &lt;td&gt;IDBI&lt;/td&gt;
          &lt;td&gt;DTDC&lt;/td&gt;
          &lt;td&gt;Approved&lt;/td&gt;
          &lt;td class="text-center"&gt;
          &lt;button class="btn btn-icon btn-primary btn-xs" id="myBtn"&gt;Close&lt;/button&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Hyderabad&lt;/td&gt;
          &lt;td&gt;Balaji Pharmacon&lt;/td&gt;
          &lt;td&gt;Sanjeevan Medical&lt;/td&gt;
          &lt;td&gt;743&lt;/td&gt;
          &lt;td&gt;Rs.21,245&lt;/td&gt;
          &lt;td&gt;21-10-2017&lt;/td&gt;
          &lt;td&gt;INV-743&lt;/td&gt;
          &lt;td&gt;Rs.2124&lt;/td&gt;
          &lt;td&gt;Santhosh Kudalkar&lt;/td&gt;
          &lt;td&gt;531035&lt;/td&gt;
          &lt;td&gt;22-11-2017&lt;/td&gt;
          &lt;td&gt;IDBI&lt;/td&gt;
          &lt;td&gt;DTDC&lt;/td&gt;
          &lt;td&gt;Approved&lt;/td&gt;
          &lt;td class="text-center"&gt;
          &lt;button class="btn btn-icon btn-primary btn-xs" id="myBtn"&gt;Close&lt;/button&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Modal:</strong></p>
  
  <pre><code>&lt;div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
  
              &lt;h4 class="modal-title"&gt;Cheque Confirmation&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Invoice Amount&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" Placeholder="Enter Invoice Amount" onkeypress="return isNumber(event)"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Cheque Amount&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" Placeholder="Enter Cheque Amount" onkeypress="return isNumber(event)"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
             &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Cheque Number&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" Placeholder="Enter Cheque Number" onkeypress="return isNumber(event)"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Name of the Bank&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" value="IDBI"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Name of the Courier&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" value="DTDC"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label class="col-sm-4 control-label"&gt;Cheque Date&lt;/label&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;input type="text" class="form-control input-sm" placeholder="mm/dd/yyyy" value="11/23/2017" id="datepicker"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
  
              &lt;button type="button" class="btn btn-info waves-effect waves-light"&gt;Confirm and Approve&lt;/button&gt;
               &lt;button type="button" class="btn btn-primary waves-effect waves-light"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Modal JS:</strong></p>
  
  <pre><code>$(document).ready(function(){
      $("#myBtn").click(function(){
          $("#con-close-modal").modal();
      });
  });
  </code></pre>