Pure Dining Table

by demos12

HTML

<table class="variations" cellspacing="0">

			<tbody>

				
					<tr style="display: table-row;">

						<td class="label">

						  <span class="swatchtitlelabel"><span class="section-number">1</span>SIZE</span>

						</td>
					</tr>
					<tr data-var-type="SIZE">
						<td class="value">

				<select style="display:none !important;" id="pa_size" class="wcva-single-select " name="attribute_pa_size" data-attribute_name="attribute_pa_size"><option value="">Choose an option</option><option value="small" class="attached enabled">SMALL</option><option value="large" class="attached enabled">LARGE</option></select> 

							<div class="attribute-swatch" attribute-index="" style="display: block;">

							          <div class="swatchinput">
	                        
								  

								  	<label selectid="pa_size" class="attribute_pa_size_small wcvaswatchlabel wcvaround" data-option="small" title="SMALL">

									  	<div class="inner-div">
                                            <div>
                                                <div class="item_details" style="background-image: url(&quot;https://dev3.wgu.com.au/wp-content/uploads/2013/04/SMALL-THUMB.png&quot;); width: 22px; height: 22px; border: none;">
                                                </div>
                                            </div>
									  		
											<span style="width:28px;" class="belowtext">SMALL</span>

																				  	</div>

								  	</label>

	                              
			               

				</div>	  

 	                   

                

				

       

    

	          <div class="swatchinput">
	                        
								  

								  	<label selectid="pa_size" class="attribute_pa_size_large wcvaround selectedswatch wcvaswatchlabel" data-option="large" title="LARGE">

									  	<div class="inner-div">
                                            <div>
                                                <div class="item_details"...

CSS

.swatchinput {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px 10px;
  width: 100px;
  display: inline-block;
  cursor: pointer;
}

.selection-result {
  display: none;
  width: 300px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px 10px;
}

.variations tr:not(:nth-child(n+2)) .swatchinput {
  pointer-events: none;
  opacity: 0.3;
}

.disabled { display: none;}

JavaScript

(function($){
    
    var n = jQuery("table.variations tr").length;
    
    $('table tr:nth-child(n+3) .swatchinput').css('opacity', '0.3');
    $('table tr:nth-child(n+3) .swatchinput').css('pointer-events', 'none');

    $(".variations tr td .swatchinput label").on('click', function(e) {
        var variant = $(this).data('option');
		//var var_id = $("input.variation_id").val();
        $(this).parents('tr').prev().fadeOut(500);
        $(this).parents('.attribute-swatch').fadeOut(500);
        $(this).parents('tr').nextAll('tr').eq(1).find('.swatchinput').css('pointer-events', 'auto').css('opacity', '1');
        $(this).parents('tr').nextAll('tr').eq(1).find('.swatchinput label').css('pointer-events', 'auto').css('opacity', '1');
        $(this).parents('tr').nextAll('tr').eq(1).find('.swatchinput').fadeIn(500);
        $(this).parents('tr').find('.selection-result').fadeIn(500);
        $(this).parents('tr').find('.selection-result').html("<div class='col-sm-8 col-xs-8'><span class='var_option var1'>" + variant + "</span></div>" + "<div id='change-selection' class='col-sm-4 col-xs-4'><span>Change</span></div>");
      
        if( $(this).parents('tr').next('tr').find('.swatchinput label').hasClass("wcvadisabled") ) {
            $(this).parents('tr').next('tr').find('.swatchinput label.wcvadisabled').closest("swatchinput").fadeOut(500);
        }
        
        var enabled_options = [];
        
        enabled_options = ['basalt-grey-ceramic', 'concrete-grey-ceramic'];
              //console.log(enabled_options);
							
              $(this).parents('tr').nextAll('tr').find(".attribute-swatch .swatchinput").each(function($) {
                var $this = jQuery("label", this);
                //console.log($this);
                 //var result = jQuery.inArray($this, enabled_options) == -1;
                 //var options = $this.data('option');
                 //var result = jQuery.inArray($this.data('option'), enabled_options);
                ...