Question

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

$('.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属性应该是唯一的，这意味着您不能拥有两个input id="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>

Answer 2

首先，必须在代码中修复一些内容。

您不应对多个元素使用完全相同的id。 id属性应该对整个页面都是唯一的。这就是为什么它只适用于第一组输入。改为使用类。

此外，输入返回文本值。你不想按原样使用它们。您应该使用parseFloat()和/或parseInt()将它们转换为数字，并且您还希望验证输入（确保它实际上是一个数字，而不是而不是文字，比如＆＃39; abc＆＃39;）。

最后，您需要将输入包装在<td>中，否则在某些情况下无法正确呈现。

还有一些事情需要清理（属性中的空格不一致），但我现在还没有进入。

现在解决方案。

现在在这种情况下，您希望处理一组输入上的click事件，然后您想要计算出倍数。您可以通过将事件侦听器绑定到table元素来完成此操作。您应该使用input事件而不是keyup，因为并非所有来自输入的更改都来自关键事件（例如，如果我使用鼠标将值粘贴到输入中，则不会被keyup）。

在事件处理程序中，您希望将DOM树遍历到输入的父级，然后从中获取要处理的一组输入。

将大部分讨论的内容放在一起，您可以得到如下代码：

$('#mytable').on('input', function (event) {
  var elem = $(event.target); // <-- this is the <input> element

  // From the input element, go up one level to the <tr> element
  var parent = elem.parent();

  // Find all the elements we'll be using using the 'name' attribute
  var qtty = parent.find('input[name="quantity_box[]"]');
  var uprice = parent.find('input[name="unit_price[]"]');
  var price = parent.find('input[name="price[]"]');

  // Leaving validation out for brevity, update the price
  price.val(parseFloat(qtty.val()) * parseFloat(uprice.val())); 
});

<table id="mytable">
  <tr>
    <td>
    <input type="text" name="quantity_box[]" class="form-control" />
    <input type="text" name="unit_price[]" class="form-control" /> display in
    <input type="text" name="price[]" class="form-control " autofocus=" " />
    </td>
  </tr>
  <tr>
    <td>
    <input type="text " name="quantity_box[]" class=" form-control ">
    <input type="text " name="unit_price[] " class="form-control "> display in
    <input type="text " name="price[]" class="form-control " autofocus=" ">
    </td>
  </tr>
</table>

正如我在评论中所说，为了简洁起见，我已经离开了验证，因此您有时会在输出中看到NaN。验证到位后，您将看到正确的输出。

这里是工作代码的小提琴：

https://jsfiddle.net/foxbunny/nowcfrbo/

Jquery在文本框数组中乘以数据

2 个答案: