javascript - Jquery 将文本框数组中的数据相乘

Question

我已经尝试过，但它只适用于第一行。我想添加第二行多个数量框和单位价格，然后在价格中显示而不更改

$('.a,.b').keyup(function(){
  var textValue1 =$(this).parent().find('.a').val();
  var textValue2 = $(this).parent().find('.b').val();

  $(this).parent().find('.price').val(textValue1 * textValue2); 
});

hereis my new html


<td id="quantity" class="col-md-1">
    <input type="text"  name="quantity_box[0]" class="form-control a" />
</td>
<td class="col-md-1">
    <input type="text"  name="unit_price[]" class="form-control b" /> </td>
<td class="col-md-1">
    <input type="text" name="price[0]" id="price" class="form-control price" autofocus="" />
</td>

Answer 1

这不适用于第二行，因为 id 属性应该是唯一的，这意味着您不能有两个带有 id 的 input ="a" 或 id="b" 或 id="price"。相反，您可以使用 class 属性，因此每个 id 都应该转换为一个类，就像这样:

$('.a,.b').keyup(function(){
  var textValue1 =$(this).parent().find('.a').val();
  var textValue2 = $(this).parent().find('.b').val();

  $(this).parent().find('.price').val(textValue1 * textValue2); 
  var sum = 0;
  $(".price").each(function() {
    sum += +$(this).val();
  });

   $("#total").val(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
  <tr>
  <td>
    <input type="text"  name="quantity_box[0]" class="form-control a" />
    <input type="text"  name="unit_price[]" class="form-control b" /> display in
    <input type="text" name="price[] "  class="form-control price" autofocus=" " />
      </td>
  </tr>
  
  <tr>  <td>
    <input type="text " name="quantity_box[]" class=" form-control a">
    <input type="text "  name="unit_price[] " class="form-control b"> display in
    <input type="text " name="price[] "  class="form-control price" autofocus=" ">
    </td></tr>
  </tbody>
</table>

<label> Toal:   <input type="text " id="total" class="form-control " autofocus=" "></label>