0

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.

1 respuesta 1

5

puedes hacerlo asi:
no es del todo eficiente pero creo que te servira

nota: no suelo utilizar jquery pero si gustas puedes cambiarlo a este

// selector de items
var $ = (s) => document.querySelectorAll(s);

// recuepara la data dentro de la tabla
var data = $("td");

//seleccionara el encabezado
var thead = $("#encabezado")[0];

//selecciona el cuerpo
var tbody = $("#cuerpo")[0];

// array objetos para la data recuperada
var columnas={};

// cantidad de items c[1] guardara la cantidad de items del recorrido
// y c[0] guardara el valor maximo de iteraciones
var c=[];
c[0]=0;

// recorremos todos los td del documento
for (let i = 1; i < data.length; i+=2) {
        // inicalizamos un arreglo
        let values=[];
        // ponemos a c[0] en 0 por cada iteracion no servira para saber la cantidad de resultados
        c[1]=0;
        //recorremos nuevamente todos los td
        for(let j = 1; j < data.length; j+=2){
            // validamos que encontremos 2 fechas iguales
            if (data[j].innerText == data[i].innerText ) {
                // agregamos al arreglo la posicion pares que son los valores
                values.push(data[j-1].innerText);
                //le sumamos 1 a c
                c[1]+=1;
            }
        }
        //validamos que c[1] sea mayor para cambiar el valor de c[0]
       c[0] = c[1] > c[0] ? c[1] : c[0];
       // agregamos el arreglo de valores a la fecha
       columnas[data[i].innerText]=values;
}


//recorremos la cantidad de items
for(let i=0; i<c[0]; i++){
//agregamos los tr de los tbody
tbody.innerHTML+=`<tr></tr>`;
   //recorremos las columnas
   for(let x in columnas){
    //validamos que i ==0 para que no repita mas de 1 vez los thead
   if(i==0)thead.innerHTML += `<th>${x}</th>`;
    //seleccionamos el  tbody con id cuerpo en la posicion p y le agregamos un td 
    $("tbody[id='cuerpo'] tr")[i].innerHTML+= (columnas[x][i] ==undefined) ? `<td>0</td>` :`<td>${columnas[x][i]}</td>` ;
   }
}
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>

1
  • ya ahora si es mas optimo que antes.... el tiempor redujo de 4.376953125ms a 2.301025390625ms gran mejora diria!
    – Bryro
    Commented el 29 ene. 2019 a las 3:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.