Skip to main content
2 de 2
se eliminó 1 carácter en el cuerpo
alanfcm
  • 20.9k
  • 11
  • 19
  • 35

¿Cómo invertir una tabla de acuerdo a fecha?

Estoy intentando invertir esta tabla de acuerdo a la fecha:

introducir la descripción de la imagen aquí

De tal manera que el resultado final al invertirla, sea este:

introducir la descripción de la imagen aquí

Como se aprecia, las fechas se hacen encabezados, pero sin repetir las fechas, y de acuerdo a cada fecha, se alinea el monto de cada fecha, poniendo por default 0 a los demás campos que no se ocupan.

He realizado este código, pero ya no tengo idea de cómo crear la nueva tabla en base a la original:

var montos = [];
            var fechas = [];  
            var datos = [];
            var body = $('#principal').find('tbody > tr > td');//tabla principal
            var header = $('#encabezado > th'); 

            function unique(list) {
                var result = [];
                $.each(list, function(i, e) {
                    if ($.inArray(e, result) == -1) result.push(e);
                });
                return result;
        }

            for(var i = 0; i < body.length; i++){

                if(body[i].innerHTML.indexOf("-") != -1){
                    fechas.push(body[i].innerHTML);
                }else{
                    montos.push(body[i].innerHTML);                 
                }                   
            }           

            for(var j = 0; j < fechas.length; j++){

                datos.push({
                        montos: montos[j],
                        fechas: fechas[j]
                    });                         
            }


            for(var k = 0; k < unique(fechas).length; k++){
                
                $('#encabezado').append('<th class = "th">'+ unique(fechas)[k] +'</th>');
            }


            var cant_montos = [];//almacenará la cant_montosidad de montos que hay por fecha

            for(var m = 0; m < $('.th').length; m++){//recorre los th de la tabla nueva
                
                var cont = 0;

                datos.forEach(function(i,element) {  //recorre el array de objetos                  

                    if($('.th')[m].innerHTML == i.fechas){ //si lo que tiene el nuevo encabezado coincide con lo que hay en el objeto fechas
                        cont += 1; //irá contando las veces que el encabezado coincida con las fechas en el array               
                        console.log($('.th')[m].innerHTML+ "  "+ i.montos);             
                    }
                });

                cant_montos.push(cont);//guardará el último numero que ha contado en cada iteración en el array
            }
div{
        border-radius: 5px;
    }
    .contenedor{
        width:100%;
        height:100px;
    }
    .contenido{
        height:100px;
        width:40%;
        float:left;
        margin: 20px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">
<table id="principal" border="" class="contenido" >
        <thead>
            <tr>
                <th>Monto</th>              
                <th>Fecha</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10</td>
                <td>2019-01-01</td>
            </tr>
            <tr>
                <td>20</td>
                <td>2019-01-01</td>
            </tr>
            <tr>
                <td>30</td>
                <td>2019-01-01</td>
            </tr>
            <tr>
                <td>40</td>
                <td>2019-01-02</td>
            </tr>
            <tr>
                <td>50</td>
                <td>2019-01-02</td>
            </tr>
            <tr>
                <td>60</td>
                <td>2019-01-03</td>
            </tr>
            <tr>
                <td>70</td>
                <td>2019-01-04</td>
            </tr>
            <tr>
                <td>80</td>
                <td>2019-01-04</td>
            </tr>
            <tr>
                <td>90</td>
                <td>2019-01-04</td>
            </tr>
            <tr>
                <td>100</td>
                <td>2019-01-04</td>
            </tr>
            
        </tbody>
    </table>

    <!--Tabla nueva-->
        <table border="" class="contenido" >
            <thead>
                <tr id="encabezado"></tr>
            </thead>
            <tbody id="cuerpo"> 
            </tbody>
        </table>
    
    </div>

Como se puede ver en el resultado de la consola, he logrado ordenar los montos de acuerdo a su fecha, es ahí donde me he atorado. No sé si lo estoy haciendo de la manera correcta o hay mejores formas de hacerlo. Ya que como lo he mencionado anteriormente, necesito crear la nueva tabla en base a la principal.

valle50
  • 1.1k
  • 12
  • 30