Question

我在jQuery方面没有太多经验，我面临以下挑战

我有下表

<table>
    <thead>
        <tr>
            <td>Qty</td>
            <td>Description</td>
            <td>Unit Price</td>
            <td>Total Price</td>
        <tr>
    </thead>
    <tbody>
        <tr id="itemRow">
            <td><input type="text" name="quantity"/></td>
            <td><input type="text" name="description"/></td>
            <td><input type="text" name="unitPrice"/>/td>
            <td><input type="text" name="totalPrice"/></td>
        <tr>
    </tbody>
</table>

<input type="text" name="total"/>

此外，我可以根据需要多次克隆#itemRow，扩大项目数量。

我们的想法是计算每行的总价格（quantity * unitPrice）并将其分配给totalPrice。并将totalPrice的总和分配给total。

这是我正在使用的javascript，但是我收到一条错误，上面写着“cantidades [i] .val（）不是函数”

function calculate(){

    var $total = $('#total');

    var $cantidades = $('input[name=quantity]')
    var $unitarios  = $('input[name=unitPrice]')
    var $totales = $('input[name=totalPrice]')

    var len = $cantidades.length;

    $total.val(0);

    for (var i = 0; i < len; i++){
        // calculate total for the row. ERROR HERE!
        $totales[i].val($cantidades[i].val() * $unitarios[i].val());

        // Accumulate total  
        $total.val($totalExento.val() + $totales[i].val());
    }
}

我错过了什么？我想我没有从选择器中获得“jQuery对象”，但我不确定这样做会很热。

提前致谢！

Answer 1

这一行：var $cantidades = $('input[name=quantity]')检索一个无法像$cantidades[i]那样访问的jQuery实例。

修复如下：

var singleElementCantidades = $($cantidades[i]);
singleElementCantidades.val();

发生的事情是$('input[name=quantity]')检索一个jQuery实例的数组。当您使用cantidades [i]访问其内容时，您不再管理jQuery实例，而是访问其他没有val定义的内容。

Answer 2

$ cantidades会使用jquery或＆＃39; index＆＃39;来为您提供get个对象。 property实际上会为您提供等效的javascript对象。因此，在您的情况下，您需要使用$cantidades[i].value.而不是$cantidades[i].val()。

 for (var i = 0; i < len; i++){
        $totales[i].value = $cantidades[i].value * $unitarios[i].value;
        $total.val($totalExento.val() + $totales[i].value);
    }

Answer 3

我认为你不能全球获得$（＆＃39;输入[name = quantity]＆＃39;），$（＆＃39;输入[name = unitPrice]＆＃39;）和$（＆＃39; ;输入[名称= totalPrice]＆＃39;。）

您应该为每一行识别它们。

这是jsfiddle

上的示例

<table>
    <thead>
        <tr>
            <td>Qty</td>
            <td>Description</td>
            <td>Unit Price</td>
            <td>Total Price</td>
      </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="number" name="quantity"/></td>
            <td><input type="text" name="description"/></td>
            <td><input type="number" name="unitPrice"/></td>
            <td><input type="number" name="totalPrice"/></td>
      </tr>
    </tbody>
</table>

<button type="button" id="addRow">addRow</button>
<button type="button" id="calculate">calculate</button>
<input type="number" name="total" id="total"/>

js部分：

$(document).ready(function () {

  var $total = $('#total');
  var $addRow = $('#addRow');
  var $calculate = $('#calculate');

  var $emptyRow = $('tbody tr').clone();
  var $body = $('tbody');

  $addRow.on('click', function () {
    $body.append($emptyRow.clone());
  });

  $calculate.on('click', function () {
    var total = 0;

    $body.find('tr').each(function () {
      var $row = $(this);
      var q = Number($row.find('[name=quantity]').val());
      var p = Number($row.find('[name=unitPrice]').val());
      var subTotal = q * p;

      $row.find('[name=totalPrice]').val(subTotal)
      total += subTotal;
    });

    $total.val(total);
  })

});

Jquery：在第3个列表中的2个输入列表之间的乘积

3 个答案: