Question

onfocusout（）从动态生成的行中访问数量和价格，将它们相乘并将其分配给总计。

我的表格：

       <table id="dynamic-field" class="table table-striped table-bordered  
       dt-responsive nowrap" cellspacing="0" width="100%">
          <thead>
            <tr>
              <!-- <th> S.No </th> -->
              <th> Product Name </th>
              <th> Quantity </th>
              <th> Price </th>
              <th> Total </th>
              <th style="text-align: center;"> <i class="fa fa-plus btn 
              btn-success" id="addProduct"></i></th>
            </tr>
            <tr>
            <td style="width: 30%">
            <select id="product_id" name="product_id[]" 
            class="formcontrol" 
            required="">
            <option> --- Select ---</option>
            @foreach($products as $product)
            <option value="{{ $product->id }}"> {{ $product->name }} 
            </option>
            @endforeach
            </select>
            </td>
            <td style="width: 20%">
            <input type="number" class="form-control" id="quantity" 
            ame="quantity[]" required="">
            </td>
            <td style="width: 20%">
            <input type="number" class="form-control" id="price" 
            name="price[]" required="">
            </td>
            <td style="width: 20%">
            <input type="number" class="form-control" id="total" 
            name="total[]" required="" >
            </td>
            <td style="text-align: center;">
            <i class="fa fa-remove btn btn-danger"></i>
            </td>
            </tr>
          </thead>
          <tbody id="sales_information">

          </tbody><!-- TBODY End -->
        </table><!-- TABLE End -->

我尝试了以下代码，但这对我不起作用：

$(document).on('focusout', '#dynamic-field tr', function(e) 
  {
    var price = $(this).find('td:nth-child(1)').val();
    alert(price);
    var quantity = $(this).find('td:nth-child(2)').val();
    var result = price * quantity;
    $('#total').val(result);
  });

它显示警报为空。

Answer 1

您不能在页面中重复ID，因此请将表单控件上的ID更改为类，然后仅将这些类作为目标。

<input type="number" class="form-control quantity" name="quantity[]" required="">

您还试图定位错误的nth-child()，因为`nth-child不像索引一样是基于零的

$(document).on('focusout', '#dynamic-field tr :input', function(e) 
  {
    var price = $(this).find('.price').val();
    alert(price);
    var quantity = $(this).find('.quantity').val();
    var result = price * quantity;
    $(this).find('.total').val(result);
  });

如何选择动态生成的行的第n个子项

1 个答案: