演示

Question

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

控制器代码

 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

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

我添加了一些类，以便更轻松地确定每个img = cv2.imread("/path/to/img.png") img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) ret, thresh = cv2.threshold(img_gray, 130, 255, cv2.THRESH_BINARY_INV) # Opencv v3.x im, contours, hierarchy = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE) for i in xrange(len(contours)): rect = cv2.boundingRect(contours[i]) contour_component = img[rect[1]:rect[1] + rect[3], rect[0]:rect[0] + rect[2]] cv2.imwrite("component_{}.png".format(i), contour_component)和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();

});

Answer 2

我找到了答案，但这仅在只有一行的情况下有效。但就我而言，它有很多行。

<input type="text" name="input1" id="input1" value="5">
<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 
onClick="calc()">Calculate</a>

<input type="text" name="output" id="output" value="">

在javascript中

$("#input2,#input1").keyup(function () {

$('#output').val($('#input1').val() * $('#input2').val());

});

这将简单地增加列数。

如何使表动态乘以Laravel中的第1列和第2列并在第3列中回答

2 个答案:

演示