File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    
     <script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
     <link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" type="text/css" />
​
   <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
     <form id="frm-example" method="post" action="" name="frm-example">
       <table id="example" class="display" cellspacing="0" width="100%">
         <thead>
           <tr>
             <th></th>
             <th>SKU</th>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>9236</td>
             <td>SCHWEDENBOMBEN® KLS 6er x 36</td>
             <td><input type="number" name="row-1-price" value="" disabled></td>
           </tr>
           <tr>
             <td>2</td>
             <td>9100</td>
             <td>SCHWEDENBOMBEN® KLS 6er x 108 Displ.</td>
             <td><input type="number" name="row-2-price"  value="" disabled></td>
           </tr>
           <tr>
             <td>3</td>
             <td>7906</td>
             <td>Manja/Swedy 252 x 6er Chep-Display</td>
             <td><input type="number" name="row-2-price" value="" disabled></td>
           </tr>
         </tbody>
         <tfoot>
           <tr>
             <th></th>
             <th>SKU</th>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </tfoot>
       </table>
       <button type="submit" id="submitButton" name="send_info">send</button>
      </form>
    </div>
  </body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
//eneble DataTable
​
var table = jQuery('#example').DataTable({
  'columnDefs': [
    {
            orderable: false,
            className: 'select-checkbox',
            targets:   0,
      render: function (data, type, row) {
        if (type === 'display') {
          return '';
        }
        return data;
      }
    }
  ],
   'select': {
      'style': 'multi',
     selector: 'td:first-child',
   },
  'order': [[1, 'asc']]
});
​
​
// Get the form element
var form = jQuery("#frm-example");
​
// Add a click event handler to the submit button
jQuery("#submitButton").on("click", function(e) {
    // Prevent the default form submission
        e.preventDefault();
  
  //var rows_selected = table.column(0).checkboxes.selected();
  table.rows({selected: true}).every( function ( rowIdx, tableLoop, rowLoop ) {
    var data = this.data();
    var node = this.node();
​
    var val = $(node).find('input[type="number"]').val();
    
    console.log(val);
​
} );
});
​
table.on( 'select', function ( e, dt, type, indexes ) {
    table[ type ]( indexes ).nodes().to$().find('input').prop('disabled', false);
} );
  
table.on( 'deselect', function ( e, dt, type, indexes ) {
    table[ type ]( indexes ).nodes().to$().find('input').prop('disabled', true);
} );
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers