Jquery在文本框数组中乘以数据 [英] Jquery multiply data in textbox array

问题描述

我试过但它只能在第一行工作。我想添加第二行多个quantity_box和unit_price然后在价格中显示而不更改

I've try but It work only first row . I want to add second row multiple quantity_box and unit_price then display in price without changing

$('.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>

推荐答案

这不适用于第二行，因为 id 属性应该是唯一的，这意味着你不能有两个输入的 id =a或 id =b或 id =price 。相反，您可以使用类属性，因此每个 id 都应该转换为类，如下所示：

This isn't working for the second row, beacause the id attribute should be unique, that's mean you can't have two inputs with id="a" or id="b" or id="price". Instead you can use the class attribute, so every id should be turned to a class, just like this:

$('.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>

这篇关于Jquery在文本框数组中乘以数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！