Как заставить таблицу динамически умножать столбец 1 и столбец 2 и отвечать в столбце 3 в Laravel
то, что я делаю, - это проект 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;
}
Я хочу, чтобы когда пользователь вводил цену за единицу и сумму, цена должна отображаться автоматически путем умножения цены за единицу и суммы. Пользователь должен иметь возможность делать это строка за строкой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Приведенный ниже код делает то, что вам нужно.
Я добавил несколько классов, чтобы было легче определить, для чего предназначен каждый 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>Я хочу сделать последний столбец еще и полем ввода. Как я это сделал. <td> <input class = "total-cost"> </td> вот так. И затем мне нужно изменить // Выводить входные значения на выходную ячейку row.find ("td input.total-cost"). Text (first * second); Но это не работает
Входы не принимают .text (), поэтому вам нужно назначить его с помощью .val ()
Наконец, мне нужно показать чистую цену под таблицей. Как я могу получить сумму цен динамически. Извините, что так много спрашиваю. Я не очень хорошо знаком с Js.
Обновлено для ваших запросов, пожалуйста, примите ответ и проголосуйте, если он работает.
Оно работает! извините, я не могу проголосовать, так как моя репутация ниже 15 :(
Я нашел ответ, но это работает, только если есть только одна строка. Но в моем случае у него много строк.
<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());
});
Это просто умножит столбцы.
Проблема, которую вы здесь используете, связана с параметром id, он просто найдет первый пример каждого из них. Код не распознает наличие нескольких строк в контексте. Это был бы очень хороший способ сделать это, если бы вычисление и ввод выполнялись только один раз на странице.
Рад, что это сработало. Удачи в остальной части вашего проекта