JSFiddle - React, Tailwind, and code Playground
HTML
<div class="b-shopcart_table">
<table>
<tfoot>
<tr>
<td colspan="3"></td>
<td><span class="b-shopcart_table__total_sum">Итого: <br><span>4</span> товара</span></td>
<td><span class="b-shopcart_table__total_weight">Общий вес:<br> <span>0</span> грамм</span></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th class="b-shopcart_table__cell-1"></th>
<th class="b-shopcart_table__cell-2">Вставка</th>
<th class="b-shopcart_table__cell-3">Количество</th>
<th class="b-shopcart_table__cell-4">Размер</th>
<th class="b-shopcart_table__cell-5">Вес</th>
<th class="b-shopcart_table__cell-6"></th>
</tr>
<tr class="b-shopcart_table__unit">
<td class="b-shopcart_table__cell-1">
<img src="http://fakeimg.pl/75x75/?text=75x75">
<h3 class="b-shopcart_table__unit__title">Кольцо</h3>
<dl class="dl-inline">
<dt><b>Артикул: </b></dt>
<dd><b>3932</b></dd>
<dt>Вес изделия, гр:</dt>
<dd>7.3</dd>
</dl>
</td>
<td class="b-shopcart_table__cell-2">
<p>Фианит</p>
<p>Фианит</p>
</td>
<td class="b-shopcart_table__cell-3">
<p><input type="number"/></p>
<p><input type="number"/></p>
</td>
<td class="b-shopcart_table__cell-4">
<p class="b-shopcart_table__unit__indicator">16</p>
<p class="b-shopcart_table__unit__indicator">16.5</p>
</td>
<td class="b-shopcart_table__cell-5">
<p class="b-shopcart_table__unit__indicator m-titleColor"><span>5</span> гр</p>
<p class="b-shopcart_table__unit__indicator m-titleColor"><span>5</span> гр</p>
</td>
<td class="b-shopcart_table__cell-6">
<a href="#" class="b-shopcart_table__unit__delete"></a>
<a href="#" class="b-shopcart_table__unit__delete"></a>
...
JavaScript
// shopcart
var NUMBER_UNIT = $('.b-shopcart_table__unit input[type=number]');
var WEIGHT_UNIT = $('.b-shopcart_table__unit__indicator span');
/*default status*/
$(NUMBER_UNIT).val(1);
$('.b-shopcart_table__total_sum span').html($(NUMBER_UNIT).length);
/*change*/
$(NUMBER_UNIT).change(function(){
/*disable minus numbers*/
if($(this).val() < 1){
$(this).val(1);
}
var count = 0;
var weight = 0;
$(NUMBER_UNIT).each(function(){
var count_iteration = parseInt($(this).val());
count += count_iteration;
});
var index = 0;
$(WEIGHT_UNIT).each(function(){
var count_iteration = parseInt($(this).html());
count_iteration *= $(NUMBER_UNIT[index]).val();
weight += count_iteration;
index++;
});
$('.b-shopcart_table__total_sum span').html(count);
$('.b-shopcart_table__total_weight span').html(weight);
});
// default weight value
var weight = 0;
$(WEIGHT_UNIT).each(function(){
var index = $(this).parent().index();
var count_iteration = parseFloat($(this).html());
weight += count_iteration;
return weight;
});
$('.b-shopcart_table__total_weight span').html(weight);