JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div class="div-table-content">
<div class="div-table div-table-head">
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
    <div class="tb-td">JAN</div>
</div>
<div class="div-table titulo" data-cat-id="1" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">

        <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
         <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); "></span>
    </div>
    <div class="tb-td"></div>
    <div class="tb-td">
       
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    </div>

<div class="div-table titulo" data-cat-id="2" data-titulo="TESTESTE">
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
        <span data-name="prod3-1" class="" style="background-color: rgb(176, 197, 176); margin-left: -50%; "></span>
        <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>
        
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td">
         <span data-name="prod3-1" class="" style="background-color: rgb(91, 183, 91); "></span>
    </div>
    <div class="tb-td"></div>
    <div class="tb-td">
       
    </div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div class="tb-td"></div>
    <div...

CSS

body, * {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

/* TABLE */

.div-table-content{
    display:block;
    margin:auto;
    width:990px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 5px;
    overflow:hidden;
    webkit-print-color-adjust:exact;
    -webkit-filter:opacity(1);
}

.div-table{
    display: table;
    border-collapse: collapse;
    position: relative;
}

.div-table[data-titulo]:after{
  content: attr(data-titulo);
    width: 100%;
    position: absolute;
    height: 24px;
    text-align: center;
    left: 0%;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 3px #444343;
    z-index: 1;
    letter-spacing: 9px;
    pointer-events: none;
    display: block;
}

.div-table .tb-td{
    display: table-cell;
    width: 250px;
    border: 1px solid #aaa;
    text-align: center;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.div-table-content .tb-td {
    border-bottom: none !important;
}

.div-table .tb-td span{
    width: 100% !important;
    height: 100% !important;
     position: absolute;
}


.div-table-content .div-table-head .tb-td{
    border-top: none !important;
} 

@media print{
    
    
      .div-table.titulo:after{
        content: attr(data-titulo);
        width: 100%;
        position: absolute;
        height: 24px;
        text-align: center;
        left: 0%;
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 3px #444343;
        z-index: 1;
        letter-spacing: 9px;
        pointer-events: none;
        display: block;
        webkit-print-color-adjust:exact;
        -webkit-filter:opacity(1);
    }
}

JavaScript

$(function(){
    
    $(".tb-td span").click(function(){
        $(this).remove();
    });
 
    var catList = get(".div-table-content");
    
      $(".div-table-content").find('span').remove();
    setTimeout(function(){
     set(".div-table-content", catList);
    }, 8000);
    
    function set(target, categoriaList){
        
        $(target).find('div.div-table[data-cat-id]').each(function(){
            
            var _selfCategoria = $(this);
            var tbtd = $('.tb-td', _selfCategoria),
             cat_id = _selfCategoria.attr('data-cat-id'),
             categoria = _.findWhere(categoriaList, {'id_categoriaproduto': cat_id});
         
            
            if(categoria !== undefined){
                
                _.each(categoria.produtos, function(produto){
                
                    tbtd.eq(produto.posicao).append('<span data-name="prod'+produto.id_produto+'-1" class="" style="background-color: rgb(91, 183, 91); margin-left: 0%; "></span>')
                    
                });
            }
        });
    }
    
});