расчет (длина * кол-во = всего (м), всего (м) * цена = общая цена), но общая цена не будет показывать результаты

Question

Я хочу рассчитать умножение на моей динамической таблице c (длина * кол-во = всего (м), всего (м) * цена = общая цена), но общая цена не будет показывать результаты.

извините мой плохой английский sh

 $('#tab_logic tbody tr').each(function(i, element) {
		var html = $(this).html();
		if(html!==''){
		    var qty2 = $(this).find('.qty2').val();
			  var length = $(this).find('.length').val();
	      var qty = $(this).find('.qty').val(length*qty2);
			  var price = $(this).find('.price').val();
			  $(this).find('.total').val(qty*price);
    }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<thead>
          <tr>
            <th class="text-center"> # </th>
            <th class="text-center"> Product </th>
            <th class="text-center"> Width </th>
            <th class="text-center"> Length </th>
            <th class="text-center"> Qty </th>
            <th class="text-center"> Total(m) </th>
            <th class="text-center"> Price Rate </th>
            <th class="text-center"> Total Price </th>
          </tr>
        </thead>
        <tbody>
          <tr id='addr0'>
            <td>1</td>
            <td><input type="text" name='product[]'  placeholder='Enter Product Name' class="form-control"/></td>
            <td><input type="text" name='width[]'  placeholder='Enter Product Name' class="form-control"/></td>
            <td><input type="number" name='length[]'  placeholder='Enter Product Name' class="form-control length"/></td>
            <td><input type="number" name='qty2[]'  placeholder='Enter Product Name' class="form-control qty2"/></td>
            <td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
            <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
            <td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
          </tr>

Answer 1

Из того, что я могу сказать из ваших фрагментов кода, вы хотите заполнить полные поля. Я сделал минимальный воспроизводимый пример на основе вашего кода. Я добавил атрибуты id в теги input и добавил кнопку вычисления, которая выполняет математические вычисления для вычисления итогов для полей. Надеюсь, это поможет вам выбрать правильный путь, чтобы вы взяли то, что у меня есть, и применили его к своему коду.

$(document).on('click','#calc', function(){
	var qty2 = $('#qty2').val();
  var length = $('#length').val();
  var temp = qty2 * length;
  var qty = $('#qty').val(temp).val();
  var price = $('#price').val();
  $('#totalNum').val(qty*price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ='tab_logic'>
<thead>
      <tr>
        <th class="text-center"> # </th>
        <th class="text-center"> Product </th>
        <th class="text-center"> Width </th>
        <th class="text-center"> Length </th>
        <th class="text-center"> Qty </th>
        <th class="text-center"> Total(m) </th>
        <th class="text-center"> Price Rate </th>
        <th class="text-center"> Total Price </th>
      </tr>
    </thead>
    <tbody>
      <tr id='addr0'>
        <td>1</td>
        <td><input type="text" name='product[]'  placeholder='Enter Product Name' class="form-control"/></td>
        <td><input type="text" name='width[]'  placeholder='Enter Product Name' class="form-control"/></td>
        <td><input id="length" type="number" name='length[]'  placeholder='Enter Product Name' class="form-control"/></td>
        <td><input id="qty2" type="number" name='qty2[]'  placeholder='Enter Product Name' class="form-control"/></td>
        <td><input id ="qty" type="number" name='qty[]' placeholder='Enter Qty' class="form-control" step="0" min="0"/></td>
        <td><input id="price" type="number" name='price[]' placeholder='Enter Unit Price' class="form-control" step="0.00" min="0"/></td>
        <td><input id="totalNum" type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
      </tr>
      </tbody>
      </table>
      <button id="calc">Calculate</button>