0

Tengo la siguiente tabla:

<body>
    <table id="datas" align="center">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Edad</th>
            </tr>
        </thead>
        <tbody id="cuerpo">

        </tbody>

    </table>
</body>

Tengo un script que me trae datos de una BD para poder llenar en la tabla:

$("body").ready(function () {

    $.ajax({
        url: "index.aspx/listado",
        method: "POST",
        //data: JSON.stringify(datos),
        //async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (respuesta) {
            console.log(respuesta.d);

            //LENAR BODY DE TABLE
        }
    });
});

Me esta llegando lo siguiente en la respuesta.d:

[{"id":1,"nombre":"Victor","edad":28},
{"id":2,"nombre":"Vix","edad":15},
{"id":3,"nombre":"Viti","edad":30},
{"id":4,"nombre":"Sandro","edad":16},
{"id":5,"nombre":"Carmen","edad":19},
{"id":6,"nombre":"Pedro","edad":20}]

Como puedo colocar estos datos en el bodyde la tabla.

1 respuesta 1

1

Te dejo un ejemplo de como lo puedes hacer. Fui comentando las lineas para que se entienda el procedimiento. Cualquier duda consultas. Saludos!

Ejemplo:

var data =[{"id":1,"nombre":"Victor","edad":28},
{"id":2,"nombre":"Vix","edad":15},
{"id":3,"nombre":"Viti","edad":30},
{"id":4,"nombre":"Sandro","edad":16},
{"id":5,"nombre":"Carmen","edad":19},
{"id":6,"nombre":"Pedro","edad":20}]


for (var i = 0; i < data.length; i++){
    //Agregamos cada item a nuestra tabla
    let item = data[i];
     addRow(item.id, item.nombre, item.edad);
}

function addRow(id, nombre, edad){
 //Primero creamos la fila
 let tblrow = document.createElement("tr");
 //creamos cada columna
 let tdId = document.createElement("td");
 let tdNombre = document.createElement("td");
 let tdEdad = document.createElement("td");
 
 //Asignamos los valores
   tdId.textContent = id;
   tdNombre.textContent = nombre;
   tdEdad.textContent = edad;
   
   //agregamos las columnas a la fila
    tblrow.appendChild(tdId);
    tblrow.appendChild(tdNombre);
    tblrow.appendChild(tdEdad);
   
   //agregamos la fila a la tabla, mas especificamente al body.
    document.getElementById("cuerpo").appendChild(tblrow);
   
}
<table id="datas" align="center">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Edad</th>
            </tr>
        </thead>
        <tbody id="cuerpo">

        </tbody>

    </table>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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