Получение конкретного значения ТД для расчета

Question

У меня есть немного кода, мне нужно получить конкретное значение td при вводе td. Я сделал некоторый код, но не получил значение. Помоги мне исправить мою ошибку. Я получаю строку и столбец, хотя я знаю, что elem.value будет получать значение, но проблема в том, что мне нужно умножить значения td каждого tr и сохранить их в следующем td этой строки.

function myFunction(elem){
    var rowIndex = elem.parentNode.parentNode.rowIndex;
    alert(rowIndex);
    var columnIndex = elem.parentNode.cellIndex;
    alert(columnIndex);
    var table = $('myTableID').DataTable();
    var val = table.cell({ row: rowIndex, column: columnIndex }).val();
}

Редактировать: Хорошо, я вызываю функцию на входе каждого тд,

<table id='myTableID'>
  <tr>
    <th>quantity</th>
    <th>rate</th>
    <th>total</th>
  </tr>
  <tr>
    <td><input type='text' id='q1' oninput='myFunction(this)' /></td>
    <td><input type='text' id='r1' oninput='myFunction(this)' /></td>
    <td><input type='text' id='t1' /></td>
  </tr>
  <tr>
    <td><input type='text' id='q2' oninput='myFunction(this)' /></td>
    <td><input type='text' id='r2' oninput='myFunction(this)' /></td>
    <td><input type='text' id='t2' /></td>
  </tr>
  <tr>
    <td><input type='text' id='q3' oninput='myFunction(this)' /></td>
    <td><input type='text' id='r3' oninput='myFunction(this)' /></td>
    <td><input type='text' id='t3' /></td>
  </tr>
</table>

Answer 1

для этого не нужно jQuery или DataTable:

const myTable = document.querySelector('#myTableID')

myTable.oninput = e =>
{
  let rowIndex = e.target.parentNode.parentNode.rowIndex
    , Qte      = getInput_N_RowCell(rowIndex,0)
    , Rate     = getInput_N_RowCell(rowIndex,1)

  setInput_RowCell(rowIndex,2, (Qte * Rate) )

  console.log('sum=',  Sum_RowInputValues(rowIndex) )
}

function getInput_N_RowCell(xRow, xCell) {
  return Number(myTable.rows[xRow].cells[xCell].querySelector('input').value) || 0
}

function setInput_RowCell(xRow, xCell, value) {
  myTable.rows[xRow].cells[xCell].querySelector('input').value = value
}



// for a sum off all row values : (not used here)  
function Sum_RowInputValues(xRow) {
  let Sum = 0
  for (c=0;c<myTable.rows[xRow].cells.length;c++ ) {
    try {
      Sum += Number(myTable.rows[xRow].cells[c].querySelector('input').value) || 0
    } catch(e) {/* nothing */ }
  }
  return Sum
}
//todo: let mySum = Sum_RowInputValues(rowVal)

<table id='myTableID'>
  <thead>
    <tr>
      <th>quantity</th>
      <th>rate</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='text'></td>
      <td><input type='text'></td>
      <td><input type='text' readonly></td>
    </tr>
    <tr>
      <td><input type='text'></td>
      <td><input type='text'></td>
      <td><input type='text' readonly></td>
    </tr>
    <tr>
      <td><input type='text'></td>
      <td><input type='text'></td>
      <td><input type='text' readonly></td>
    </tr>
  </tbody>
</table>

Answer 2

Пожалуйста, попробуйте ниже код и проверьте рабочий пример -> Нажмите здесь

HTML-код

<table id='myTableID'>
  <tr>
    <th>quantity</th>
    <th>rate</th>
    <th>total</th>
  </tr>  
  <tr>
    <td><input type="number" class="qty" /></td>
    <td><input type="number"  class="rate"/></td>
    <td><input type="number" class="total" readonly=""/></td>   
  </tr>
   <tr>
    <td><input type="number" class="qty" /></td>
    <td><input type="number"  class="rate"/></td>
    <td><input type="number" class="total" readonly=""/></td>   
  </tr>
</table>

Код запроса

$("#myTableID").on('input', ".qty , .rate", function () {
        var  qty =0,rate=0,total=0;
    var otr = $(this).closest('tr');
     qty = $(otr).find("input.qty").val();    
     rate = $(otr).find("input.rate").val();    
     total = (qty * rate);
     if(total!="0")
     $(otr).find("input.total").val(total);   
});