JSFiddle - React, Tailwind, and code Playground
by AJIEKCEU
HTML
<form class="cart_form">
<table class="cart_form_table">
<thead>
<tr>
<th>Название</th>
<th></th>
<th>Количество</th>
<th>Цена(шт.)</th>
<th>цена общая</th>
<th>скидка</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/img6.png" alt=""/></td>
<td>Бассейн для дачи intex 33</td>
<td>
<div class="wrp_col_prod">
<i class="minus">-</i>
<input type="text" class="it" value="2"/>
<i class="plus">+</i>
</div>
</td>
<td>
<span class="cart_price_prod"><i>2 900 000</i> р.</span>
</td>
<td>
<span class="cart_total_price"><i>5 400 00</i> р.</span>
</td>
<td>
<span class="discount"><i>10</i>%</span>
</td>
<td>
<a href="#" class="cart_del_prod"></a>
</td>
</tr>
<tr>
<td><img src="images/img2.png" alt=""/></td>
<td>Мультиварка MC-234</td>
<td>
<div class="wrp_col_prod">
<i class="minus">-</i>
<input type="text" class="it" value="2"/>
<i class="plus">+</i>
</div>
</td>
<td>
<span class="cart_price_prod"><i>2 700 000</i> р.</span>
</td>
<td>
<span class="cart_total_price"><i>5 400 000</i> р.</span>
</td>
<td>
<span class="discount"><i>10</i>%</span>
</td>
<td>
<a href="#" class="cart_del_prod"></a>
</td>
</tr>
<tr>
<td><img src="images/img10.png" alt=""/></td>
<td>Бассейн для дачи intex 33</td>
<td>
<div class="wrp_col_prod">
<i class="minus">-</i>
<input type="text" class="it" value="2"/>
<i class="plus">+</i>
</div>
</td>
<td>
<span class="cart_price_prod"><i>2 700 000</i>...CSS
@charset "utf-8";article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{cnt:none}hr{border:0;border-top:1px solid #e8e8e8;display:block;margin:0 0 18px;padding:0;clear:both;display:block}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}input[type=text]:focus{outline:0}input::-ms-clear{display:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a...JavaScript
$(function() {
var form = $('.cart_form'),
totalPrices = form.find('.cart_total_price i'),
totalSelector = form.find('.total span'),
totalDiscount = form.find('.discount_price span')
discountSelector = '.discount i';
//увеличивание значения value на 1
$(".plus").click(function() {
var data = $(this).prev().val();
if (data >= 0) {
$(this).prev().val(parseInt(data) + 1);
}
var recalc = $(this).parents('tr').find('.cart_price_prod i').text().replace(/\s/g, ""),
totalPrice = (recalc * $(this).prev().val()).toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
$(this).parents('tr').find('.cart_total_price i').text(totalPrice);
calcTotal();
return false;
});
//уменьшение значения value на 1
$(".minus").click(function() {
var data = $(this).next().val();
if (data > 0) {
$(this).next().val(parseInt(data) - 1);
}
var recalc = $(this).parents('tr').find('.cart_price_prod i').text().replace(/\s/g, ""),
totalPrice = (recalc * $(this).next().val()).toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
$(this).parents('tr').find('.cart_total_price i').text(totalPrice);
calcTotal();
return false;
});
$('.cart_form .it').change(function() {
var data = $(this).val();
var recalc = $(this).parents('tr').find('.cart_price_prod i').text().replace(/\s/g, ""),
totalPrice = (recalc * data).toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
$(this).parents('tr').find('.cart_total_price i').text(totalPrice);
calcTotal();
});
function calcTotal() {
var total = 0, totalDiscountPrice = 0;
totalPrices.each(function() {
var price = parseInt($(this).text().replace(/\s/g, "")),
discount = parseInt($(this).closest('tr').find(discountSelector).text()),
calcDiscount = price - (price/100*discount);
total += price;
totalDiscountPrice += calcDiscount;
});
...