如何使用jquery数据表对div contenteditable值应用运行时计算？

Question

此计划工作正常但当前销售和期末余额的所有值均为div contenteditable（可更改），因此每当我们更改值时，所有计算应该在运行时自动更新谢谢。

示例：当我在div contenteditable中更改当前销售和结束余额的任何值时，所有所有计算都应自动更新我应该在代码中更改的内容？谢谢

我需要帮助，我被困在那里 - 我是javascript和jquery的新手。

＆＃13;

＆＃13;

$(document).ready(function() {
  $.each(dataSet, function(i, it) {
    console.log(it);
    it.cbTotal = it.nsp * it['closing-balance'];
    it.csTotal = it.nsp * it['current-sales'];
  });
  // Table definition
  var dtapi = $('#example').DataTable({
    data: dataSet,
    "deferRender": false,
    "footerCallback": function(tfoot, data, start, end, display) {
      var api = this.api();
      var q = api.column(2).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(2).footer()).html(q);
      $("#cstotal").val(q);
      var p = api.column(3).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(3).footer()).html(p);
      $("#cbtotal").val(p);
    },
    "order": [1],
    "columns": [
      // rest of the columns
      {
        data: "product_name"
      }, {
        data: "nsp"
      }, {
        data: "current-sales"
      }, {
        data: "closing-balance"
      }
    ]
  });
});
var dataSet = [{
  "product_name": "Satou",
  "nsp": 230,
  "current-sales": '<div contenteditable id="data1">50</div>',
  "closing-balance": '<div contenteditable id="data2">23</div>'
}, {
  "product_name": "panadol",
  "nsp": 191,
  "current-sales": '<div contenteditable id="data1">152</div>',
  "closing-balance": '<div contenteditable id="data1">131</div>'
}, {
  "product_name": "disprine",
  "nsp": 191,
  "current-sales": '<div contenteditable id="data1">40</div>',
  "closing-balance": '<div contenteditable id="data1">37</div>'
}, {
  "product_name": "panadol",
  "nsp": 120,
  "current-sales": '<div contenteditable id="data1">8</div>',
  "closing-balance": '<div contenteditable id="data1">173</div>'
}];

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table width="100%" class="display" cellspacing="0" id="example">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
    </tr>
  </tfoot>
  <tbody>
  </tbody>
  <!-- /.panel-heading -->
</table>

＆＃13;

＆＃13;

＆＃13;