Рассчитать итоговую сумму в таблице - js
Всем привет! Нужна помощь в доработке калькулятора расчета услуг.
Основная задача - внедрить калькулятор в существующую таблицу с услугами компании. В нее входят два условия:
Вторую задачу, казалось бы тоже легкую, решить не могу. Буду признателен за помощь. Заранее спасибо. Таблица на jsfiddle Возможно, кому-то в дальнейшем тоже пригодится. |
<style>
input.result,
input.colvo {
border: 0;
text-align: center;
background-color: rgba(255, 255 ,255, .15);
}
input.result {
text-align: left;
background-color: rgba(255, 255 ,255, 0);
}
input.price {
display: none;
}
input.result,
input.price {
pointer-events:none;
}
</style>
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col" style="width: 30%">Показатель</th>
<th scope="col" style="width: 20%">Время исполнения*</th>
<th scope="col"style="width: 20%">Стоимость за единицу</th>
<th scope="col" style="width: 30%">Введите коичество анализов <sup style="color:#990000">макс. 50*</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td>Итоговая сумма: </td>
<td></td>
<td><input id="allresult" value="0"> ₽</td>
<td></td>
</tr>
<tr class="table-info">
<td>1,1,2,2-тетрахлорэтан</td>
<td>1,5 часа</td>
<td><input class="result" value=""></td>
<td ><input class="colvo" value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
</tr>
<tr>
<td>1,1,2-трихлорэтан</td>
<td>1,5 часа</td>
<td><input class="result " value=""></td>
<td ><input class="colvo" value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.colvo').on('input',function(){
var par = $(this).parent().parent();
var res = $('#allresult');
par.find('.result').val(par.find('.price').val()*$(this).val());
res.val(0);
$('.result').each(function(ind, el) {
res.val(+res.val() + +el.value);
});
});
});
</script>
|
Огромное спасибо!
|
Dilettante_Pro, а можно на основе этого скрипта вывести строки с выбранными услугами и их кол-вом в еще один отдельный блок? Я вывел еще один результат в отдельную табличку, но не знаю как вывести в ней появление строк с выбранными услугами.
|
Вы можете вписать что хотите куда хотите точно так же, как суммарный результат прописывается в <td><input id="allresult" value="0"> ₽</td>
Покажите полный макет с дополнительной таблицей и что у вас не получается. |
Я не совсем то имел ввиду. Вот сама табличка https://jsfiddle.net/madeas/evbLyrf3/53/
Наверх добавил еще одну, с текстом ИТОГО и пустой строкой (tr). Надо как-то сделать, чтобы в ней появлялись выбранные строки из первой таблицы. Т.е.: 1. Название (показатель) 2. Выбранное количество анализов 3. И общая стоимость напротив каждого анализа, в зависимости от количества. 4. Итоговая сумма, которую я уже вывел. Вот. Как вывести строки из одной таблицы с другую не знаю. Табличка 2 такая же как и 1, только убрал колонку времени. |
а суммарный результат почему-то повторно не выводится, пришлось добавить новый id в таблице. Он выходит только в одном, в другом остается ноль.
|
<style>
input.result,
input.colvo {
border: 0;
text-align: center;
background-color: rgba(255, 255 ,255, .15);
}
input.result {
text-align: left;
background-color: rgba(255, 255 ,255, 0);
}
input.price {
display: none;
}
input.result,
input.price,
.first {
pointer-events:none;
}
</style>
<table class="first table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">Показатель</th>
<th scope="col">Стоимость анализов</th>
<th scope="col" class="text-secondary">Количество анализов <sup><a href="#t--two" style="cursor: help;text-decoration: none;" class="text-danger" data-toggle="tooltip" data-placement="top" title="Максимальное количество проводимых анализов - 50">**</a></sup></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col" style="width: 30%">Показатель</th>
<th scope="col" style="width: 20%">Время исполнения*</th>
<th scope="col"style="width: 20%">Стоимость за единицу</th>
<th scope="col" style="width: 30%">Введите коичество анализов <sup style="color:#990000">макс. 50*</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td>Итоговая сумма: </td>
<td></td>
<td><input id="allresult" value="0"> ₽</td>
<td></td>
</tr>
<tr>
<td>1,1,2,2-тетрахлорэтан</td>
<td>1,5 часа</td>
<td><input class="result" value=""></td>
<td ><input class="colvo" value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
</tr>
<tr>
<td>1,1,2-трихлорэтан</td>
<td>1,5 часа</td>
<td><input class="result " value=""></td>
<td ><input class="colvo" value="0" type="number" min="0" max="50" step="1"> <input class="price" value="1500"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.colvo').on('input',function(){
var targetTable = $('table.first tbody');
targetTable.html('');
var par = $(this).parent().parent(),
res = $('#allresult');
par.find('.result').val(par.find('.price').val()*$(this).val());
res.val(0);
$('.result').each(function(ind, el) {
var p = $(el).parent().parent();
res.val(+res.val() + +el.value);
if(+el.value > 0) {
$(el).parent().parent().clone().appendTo(targetTable);
}
});
res.parent().parent().clone().appendTo(targetTable);
});
});
</script>
|
Dilettante_Pro, еще раз, огромное спасибо!
|
| Часовой пояс GMT +3, время: 11:17. |