Показать сообщение отдельно
  #2 (permalink)  
Старый 13.04.2018, 14:22
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
Ответить с цитированием