JSFiddle - React, Tailwind, and code Playground

by Александр Пустовит

HTML

<form class="menuOrderForm" method="post" action="">
	<div class="menuGroupContents">
		<table>
			<tbody>

<tr data-pos="30;2;0;0">
										<td class="itemPortion" rowspan="16">75/25</td>
										
					<td rowspan="16">Гуляш из свинины</td>
					
										
					<td>Без гарнира</td>
					<td class="itemPrice">100</td>
					<td class="itemCount">
						<img src="/images/d.gif" border="0" class="decrease" alt="-">
						<input type="text" name="order_items[485][28]" value="0">
						<img src="/images/u.gif" border="0" class="increase" alt="+">
					</td>
					
										
					<td class="itemCost">0</td>
				</tr>
												
								<tr>
					<td>Рис отварной</td>
					<td class="itemPrice">120</td>
					<td class="itemCount">
						<img src="/images/d.gif" border="0" class="decrease" alt="-">
						<input type="text" name="order_items[485][1]" value="0">
						<img src="/images/u.gif" border="0" class="increase" alt="+">
					</td>
					<td class="itemCost">0</td>
				</tr>
								<tr>
					<td>Спагетти с сыром</td>
					<td class="itemPrice">130</td>
					<td class="itemCount">
						<img src="/images/d.gif" border="0" class="decrease" alt="-">
						<input type="text" name="order_items[485][21]" value="0">
						<img src="/images/u.gif" border="0" class="increase" alt="+">
					</td>
					<td class="itemCost">0</td>
				</tr>
								<tr>
					<td>Макароны отварные</td>
					<td class="itemPrice">120</td>
					<td class="itemCount">
						<img src="/images/d.gif" border="0" class="decrease" alt="-">
						<input type="text" name="order_items[485][3]" value="0">
						<img src="/images/u.gif" border="0" class="increase" alt="+">
					</td>
					<td class="itemCost">0</td>
				</tr>
				</tbody></table></div></form>

CSS

.menuGroupContents table {
    border-collapse: collapse;
    width: 100%;
}
.menuGroupContents table td {
    border: 1px solid #d2d2d1;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    padding-bottom: 5px;
    padding-left: 3px;
    padding-top: 5px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.menuGroupContents table tr.selectedItem td {
    font-weight: bold;
}

JavaScript

var $menu_table = $('.menuGroupContents table'),
			$sum_value  = $('.menuOrderSumm .summValue'),
			$order_butt = $('.orderSubmitButton'),
			$order_min_w= $('.orderMinSumWarn'),
			min_ord_sum = 300,
			$form       = $('.menuOrderForm');
		
		function order_sum()
		{
			var sum = 0;
			
			$menu_table.find('.selectedItem .itemCost').each(function(){
				var val = $(this).text()*1;
				if(!isNaN(val))
					sum += val;
			});
			
			return sum;
		}
		
		$menu_table.find('input').change(function() {
			var os = order_sum();
			$sum_value.text(os);
			if(os < min_ord_sum)
			{
				$order_butt.attr('disabled', true);
				$order_min_w.show('fast');
			}
			else
			{
				$order_butt.attr('disabled', false);
				$order_min_w.hide('fast');
			}
		}).trigger('change');
		
		
		$form.submit(function(){
			if(this.action == '#')
			{
				alert('Осуществление заказа недоступно');
				return false;
			}
			return true;
		})
    
    function _crease(sign)
	{
		var val = this.value.replace(/\D+/, '');
		if(val == '')
			val = 0;
		val *= 1;
		val += sign;
		if(val < 0)
			val = 0;
		this.value = val;
	}
$('.itemCount img').click(function(){
		
		var sign = ($(this).hasClass('increase') ? 1 : -1),
			obj  = $(this).parent().find('input').get(0);
		_crease.call(
			obj, sign
		);
		$(obj).trigger('change');
		
		return false;
	})
	
	$('.itemCount input').change(function(){
		var $tr = $(this).parents('tr').eq(0);
		
		var $price = $tr.find('.itemPrice'),
			$cost  = $tr.find('.itemCost'),
			result = (this.value*1 * $price.text()*1);
			
		if(result)
			$tr.addClass('selectedItem')
		else
			$tr.removeClass('selectedItem');
		
		$cost.html(result);
	});