1

Tengo la siguiente parte de código en JS para mostrar en una tabla, pero en vez de mostrarme todos los registros del array, solo me muestra el último:

for (var i = 0; i < datos.lpaElementPrivativo.length; i++) {
   console.info(datos.lpaElementPrivativo[i]);
   let tdo = document.querySelector('#tdo');
   tdo.innerHTML = `
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].descriptionElementPrivativo}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].unit}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].quantity}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].vrnPerUnit}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].remainingLife}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].age}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].ageFactor}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].conservationfactor}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].resultfactorfre}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${Math.round(datos.lpaElementPrivativo[i].netrv*100)/100}</td>
        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].partialvalue}</td>`

Y así está mi tabla en HTML5:

<div class="row justify-content-center">
   <table style=" width: 1141px; margin-bottom: 10px;">
       <thead style="color: white;background-color: #53A5E1; height: 50px !important; width: 1221px !important; font-size: 11px;">
            <tr>
                <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center;">DESCRIPCION</th>
                <th style="border: 1px solid black !important; height: 50px; width: 50px; padding: 0px !important; font-size: 11px; text-align: center;">UNIDAD</th>
                <th style="border: 1px solid black !important; height: 50px; width: 50px; padding: 0px !important; font-size: 11px; text-align: center;">CANT.</th>
                <th style="border: 1px solid black !important; height: 25px; width: 50px !important; padding: 0px !important; text-align: center; font-size: 11px;">V.R. NUEVO</th>
                <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">V. R. REMANENTE</th>
                <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 120px !important;">EDAD EN AÑOS</th>
                <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 120px !important;">FACTOR EDAD</th>
                <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">FACTOR CONSERVACIÓN</th>
                <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">FACTOR RESULTANTE</th>
                <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">V.R. NETO ($/M2)</th>
                <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center; width: 150px !important;">VALOR PARCIAL ÁREAS COMUNES</th>
           </tr>
        </thead>
        <tbody>
           <tr id="tdo">
           </tr>
        </tbody>
    </table>
</div>

Pido su ayuda para poder mostrar todos mis registros y de antemano les agradezco todo su apoyo.

1
  • 3
    Estás seteando en cada ciclo la variable tdo.innerHTML. Si intentas agregando todo el html a una variable con += y al finalizar el if le asignas esa variable al tdo.innerHTML?
    – Bicho
    el 13 mar. 2020 a las 19:10

3 respuestas 3

0

Agrega un id a la tabla y luego prueba esto:

let tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

for (var i = 0; i < datos.lpaElementPrivativo.length; i++) {
    let nuevaFila = tbody.insertRow();
    nuevaFila.innerHTML = `<td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].descriptionElementPrivativo}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].unit}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].quantity}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].vrnPerUnit}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].remainingLife}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].age}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].ageFactor}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].conservationfactor}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].resultfactorfre}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${Math.round(datos.lpaElementPrivativo[i].netrv*100)/100}</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].partialvalue}</td>`;
}
0

Imagino que quieres agregar filas de forma dinamica

 <script type="application/javascript">
        function mia() {
            let tdo = document.getElementById('tdo');

            for (var i = 0; i < 12; i++) {
                var tr = document.createElement('tr');
                tr.innerHTML = `<tr>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">hola</td>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;"></td> </tr>`
                tdo.children[0].appendChild(tr);
            }

        }
    </script>
    <button onclick="mia()"> ADD</button>

    
    <div class="row justify-content-center">
    <table style=" width: 1141px; margin-bottom: 10px;">
        <thead
            style="color: white;background-color: #53A5E1; height: 50px !important; width: 1221px !important; font-size: 11px;">
        <tr>
            <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center;">
                DESCRIPCION
            </th>
            <th style="border: 1px solid black !important; height: 50px; width: 50px; padding: 0px !important; font-size: 11px; text-align: center;">
                UNIDAD
            </th>
            <th style="border: 1px solid black !important; height: 50px; width: 50px; padding: 0px !important; font-size: 11px; text-align: center;">
                CANT.
            </th>
            <th style="border: 1px solid black !important; height: 25px; width: 50px !important; padding: 0px !important; text-align: center; font-size: 11px;">
                V.R. NUEVO
            </th>
            <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">
                V. R. REMANENTE
            </th>
            <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 120px !important;">
                EDAD EN AÑOS
            </th>
            <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 120px !important;">
                FACTOR EDAD
            </th>
            <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">
                FACTOR CONSERVACIÓN
            </th>
            <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">
                FACTOR RESULTANTE
            </th>
            <th style="border: 1px solid black !important; height: 50px; padding: 0px !important; font-size: 11px; text-align: center; width: 50px !important;">
                V.R. NETO ($/M2)
            </th>
            <th style="border: 1px solid black !important; height: 50px; width: 150px !important; padding: 0px !important; font-size: 11px; text-align: center; width: 150px !important;">
                VALOR PARCIAL ÁREAS COMUNES
            </th>
        </tr>
        </thead>
        <tbody id="tdo">
        <tr></tr>
        </tbody>
    </table>
</div>

El detalle es que le has puesto un id a tu tr pero no lo estas accediendo correctamente deberia ser ademas imagino que quieres agregarle filas a la tabla:

let tdo = document.getElementById('tdo'); // fuera de tu ciclo for
0

Como bien dice @Bicho, el código no funciona porque dentro del bucle no concatenas, sino que cambias el contenido sin más con tdo.innerHTML =.

Pero además de eso, dentro del bucle creas cada vez una referencia al elemento tdo del DOM con let tdo = document.querySelector('#tdo');

Hacer todo eso dentro de un bucle, aparte de afectar el rendimiento, provoca que no funcione al no concatenar.

La buena práctica exige que:

  1. Crees las referencias a los elementos fuera de los bucles
  2. Evites modificar los elementos fuera de los bucles, con innerHTML o de otro modo, sino que crees una variable para recoger las filas y modifiques el elemento una sola vez al salir de bucle.

Por otra parte, si se trata de agregar varias filas al body de la tabla, convendría crearlas como tal dentro del bucle y luego agregarlas a tbody. Para hacer eso primeramente puedes darle un id a la tabla, por ejemplo:

        <table id="mTable" style="width: 1141px; margin-bottom: 10px;">

Y luego, en Javascript:

Por ejemplo:

/*Variable para concatenar*/
var mHTML="";
/*Referencia al tbody*/
let tBody = document.querySelector('#mTable tbody');

for (var i = 0; i < datos.lpaElementPrivativo.length; i++) {
                    console.info(datos.lpaElementPrivativo[i]);
                    /*OJO agregamos la etiqueta <tr>*/
                    mHTML+=`
                       <tr>
                        <td style=" font-size: 11px;border: 1px solid black !important; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lpaElementPrivativo[i].descriptionElementPrivativo}</td>
                       </tr>`
                        /*Aquí todos los otros td y no olvides cerrar </tr>*/
}
/*Ahora sí modificamos el elemento*/
tBody.innerHTML=mHTML;

Como recomendación final. Evita los estilos in line y el uso de !important. Considera mejor usar clases CSS.

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.