Jquery Tables Fetch Cell Input Value

Datatables.net using of a Input element inside a cell and fetching a value

by Hifni Nazeer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/1.10.21/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
      <table id="example" class="table table-sm" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>.</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>.</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td><input type='number' class='input-cell-value' id='emp1' name= 'emp1' style="width:75px;max-length:75px" value=0></td>
            <td><button class='btn-sm'>Update</button></td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td><input type='number' class='input-cell-value' id='emp2' style="width:75px;max-length:75px" value=0></td>
            <td><button class='btn-sm'>Update</button></td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td><input type='number' class='input-cell-value' id='emp3' style="width:75px;max-length:75px" value=0></td>
           ...

JavaScript

$(document).ready( function () {
  
  var table = $('#example').DataTable();
  
  $('#example tbody').on("click", "button", function () {
    var row = $(this).parents('tr');
    var data = table.row($(this).parents('tr')).data();
    
    table.state.save();
    
    alert(data[0]);
    //alert($($(data[5]) '#emp1').val();
    var selectorName = '[name=emp1]';
    alert($(selectorName).val());
    alert(table.cell(table.row(row).index(),5).nodes().$('#emp1').val());
    
  });
});