javascript - 如何在 Laravel 中使表格动态地将第 1 列和第 2 列相乘并在第 3 列中给出答案

Question

我正在做的是一个 Laravel 项目。当用户在第 1 列和第 2 列中插入数字时，该网页需要添加一个表格，该表格应将数字相乘并应显示在第 3 列中。

Controller 代码

 public function makeTable(Request $request){        
    $items = $request->get('values');
    $output = '<table class="table table-sm">
    <thead>
      <tr>
        <th scope="col">Item ID</th>
        <th scope="col">Food Item</th>
        <th scope="col">Unit Price</th>
        <th scope="col">Amount</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>';

    foreach ($items as $item){            
        $itemId = FoodItem::where('itemName','like','%'.$item.'%')->value('id');          
        $output .= '<tr>
        <th scope="row">'.$itemId.'</th>
        <td>'.$item.'</td>
        <td><input type="text" class="form-control"></td>
        <td><input type="text" class="form-control"></td>
        <td></td>
      </tr>';
    }
    $output .= '</tbody>
    </table>';  

    echo $output;
}

我想要的是，当用户输入单价和金额时，价格应该通过单价和金额相乘自动显示。 用户应该能够逐行执行此操作。

Answer 1

下面的代码可以满足您的要求。

我添加了一些类，以便更轻松地确定每个 input 和 td 的用途。

我还添加了事件触发器，这意味着动态添加的行将继续工作(单击“添加”按钮即可查看实际情况)。

更新将每行成本更改为请求的输入，并为所有行的值添加求和函数。

<小时/>

演示

// Add event trigger to inputs with class auto-calc
$(document).on("keyup change paste", "td > input.auto-calc", function() {

  // Determine parent row
  row = $(this).closest("tr");

  // Get first and second input values
  first = row.find("td input.unit-price").val();
  second = row.find("td input.amount").val();

  // Print input values to output cell
  row.find(".total-cost").val(first * second);


  // Update total invoice value
  var sum = 0;
  // Cycle through each input with class total-cost
  $("input.total-cost").each(function() {
    // Add value to sum
    sum += +$(this).val();
  });

  // Assign sum to text of #total-invoice
  // Using the id here as there is only one of these
  $("#total-invoice").text(sum);


});


// Add dynamic row to demonstrate works in this case
$(document).on("click", "#add", function() {

  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');
  $(this).remove();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">Item ID</th>
      <th scope="col">Food Item</th>
      <th scope="col">Unit Price</th>
      <th scope="col">Amount</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th scope="row">ITEM001</th>
      <td>PLATE</td>
      <td><input type="text" class="auto-calc unit-price form-control"></td>
      <td><input type="text" class="auto-calc amount form-control"></td>
      <td><input type="text" class="total-cost form-control"></td>
    </tr>
    
    
    <tr>
      <th scope="row">ITEM002</th>
      <td>SPOON</td>
      <td><input type="text" class="auto-calc unit-price form-control"></td>
      <td><input type="text" class="auto-calc amount form-control"></td>
      <td><input type="text" class="total-cost form-control"></td>
    </tr>
    
    
  </tbody>
</table>


<p>Total invoice amount: <span id="total-invoice">0</span>.
  <p>

    <button id="add">Add row</button>