JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="manejo" class="div-table-content" data-init="true">
        <div class="div-table div-table-head">
            <div class="tb-td">JAN</div>
            <div class="tb-td">FEV</div>
            <div class="tb-td">MAR</div>
            <div class="tb-td">ABR</div>
            <div class="tb-td">MAI</div>
            <div class="tb-td">JUN</div>
            <div class="tb-td">JUL</div>
            <div class="tb-td">AGO</div>
            <div class="tb-td">SET</div>
            <div class="tb-td">OUT</div>
            <div class="tb-td">NOV</div>
            <div class="tb-td">DEZ</div>
        </div>

        
        <div class="div-table titulo" data-id-catmanejo="1" data-color="#1b1b1b" data-titulo="IATF: Estação de monta / Repasse " data-abrev="IATF">
            <div class="tb-td"></div>
            <div class="tb-td"></div>
            <div class="tb-td"></div>
            <div class="tb-td select" style="background-color: rgb(27, 27, 27);"></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 class="tb-td"></div>
            <div class="tb-td"></div>
        </div>
        
        <div class="div-table titulo" data-id-catmanejo="2" data-color="#0598c9" data-titulo="Parição" data-abrev="Pari">
            <div class="tb-td"></div>
            <div class="tb-td"></div>
            <div class="tb-td"></div>
            <div class="tb-td"></div>
            <div class="tb-td select" style="background-color: rgb(5, 152, 201);"></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...

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("#manejo");
    
    $("#manejo").find('.select').removeClass('select').removeAttr('style');
    
    setTimeout(function(){
     set("#manejo", catList);
    }, 8000);

   function get(target){
        
        var categoriaList = [];
        
        $(target).find('div.div-table[data-id-catmanejo]').each(function(){
            
         var _selfCategoria = $(this);
         var cat_id = _selfCategoria.attr('data-id-catmanejo');
         var tbtd = $('.tb-td', _selfCategoria);
         var selecionadas = _selfCategoria.find('.tb-td.select');     
         var selectList = [];
            
         if (selecionadas.length && _.findWhere(categoriaList, {'id_categoriaproduto': cat_id}) === undefined) {
             
             selecionadas.each(function(){
                 var _select = $(this);
                 var posicao = tbtd.index(_select);
                 
                  selectList.push({
                        'posicao': posicao
                  });
                 _select = null;
             });
             
                 categoriaList.push({
                        'id_categoriamanejo': cat_id,
                        'selecionadas': selectList
                 });
          }
            
        });
       
       _selfCategoria = null;
       
       tbtd = null;
       
        return categoriaList;
    };    
    
    function set(target, categoriaList){
        
        $(target).find('div.div-table[data-id-catmanejo]').each(function(){
            
            var _selfCategoria = $(this);
            var tbtd = $('.tb-td', _selfCategoria),
             cat_id = _selfCategoria.attr('data-id-catmanejo'),
                cor = _selfCategoria.attr('data-color'),
             categoria = _.findWhere(categoriaList, {'id_categoriamanejo': cat_id});
                     
            if(categoria !== undefined){
             ...