2

Tengo este div en mi HTML:

Cambios realizados:

y estoy recorriendo un objeto Javascript, y quiero añadir unas filas con el contenido del Objeto, que es dinámico, el código que tengo es el siguiente:

function pedirDatosTexto(ct){
 var cam= JSON.parse(ct);
     $.each(cam.cambios, function(x, it) {
         var nombreTarjeta= it.nameCard;
         var nombreLista= it.nameList;
         var nombreListaNueva= it.nameListCambiada;
         var tableObj = document.getElementById(tablaRes);
         var celda= '" "nombreTarjeta+ " : "+ nombreLista+" Cambia a"+nombreListaNueva+" "';  
         });
};

3 respuestas 3

5

La verdad no sé cómo estás trayendo la data ni cómo esta estructurada tu tabla, pero en términos generales, si traes el archivo mediante una llamada AJAX, sería algo así (también aplica para llamadas locales):

$(function(){
  $(".cargar").click(function(){
    $.get('https://test-163a4.firebaseapp.com/lista.json?callback=?', function(data){
      $("#cuerpo").html("");
      for(var i=0; i<data.datos.length; i++){
        var tr = `<tr>
          <td>`+data.datos[i].nombre+`</td>
          <td>`+data.datos[i].apellido+`</td>
          <td>`+data.datos[i].cargo+`</td>
          <td>`+data.datos[i].empresa+`</td>
        </tr>`;
        $("#cuerpo").append(tr)
      }
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  Prueba de tabla Cargada desde JSON
</h1>
<button class="cargar">
  Cargar Lista
</button>
<table>
  <thead>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Cargo</th>
    <th>Empresa</th>
  </thead>
  <tbody id="cuerpo">
  </tbody>
</table>

2

Aquí le muestro un ejemplo usando una tabla generada dinámicamente.

Usando una matriz para completar los valores de TD:

function addTable() {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')

table.border = '1'
table.appendChild(tableBody);

var heading = new Array();
heading[0] = "Tipo de Solicitud"
heading[1] = "Grupo A"
heading[2] = "Grupo B"
heading[3] = "Grupo C"
heading[4] = "Total"

var stock = new Array()
stock[0] = new Array("Carros", "88.625", "85.50", "85.81", "987")
stock[1] = new Array("Colores", "88.625", "85.50", "85.81", "989")
stock[2] = new Array("Numeros", "88.625", "85.50", "85.81", "990")
stock[3] = new Array("Peticiones", "88.625", "85.50", "85.81", "991")

//COLUMNAS DE LA TABLA
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
    var th = document.createElement('TH')
    th.width = '75';
    th.appendChild(document.createTextNode(heading[i]));
    tr.appendChild(th);
}

//FILAS DE LA TABLA
for (i = 0; i < stock.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < stock[i].length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(stock[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}  
myTableDiv.appendChild(table)
}
<div id="metric_results">
<h2>CARGANDO DATOS DINAMICAMENTE</h2>
<input type="button" id="create" value="Click Aquí" onclick="Javascript:addTable()">
</div>

2

Hola a mi me funciono de la siguiente manera, en tu HTML ingresas la tabla de esta manera:

<table id="tabla">
<thead>
  <tr>
    <th>Titulo 1</th>
    <th>Titulo 2</th>
    <th>Titulo 3</th>
    <th>Titulo 4</th>
  </tr>
</thead>
<tbody id="myTable">
</tbody>

De esta manera definimos los títulos que contendrán nuestras columnas (Titulo 1, Titulo2 etc...), en el id"MyTable" llenaremos las columas con Javascript, realizando una consulta a nuestro archivo php mediante AJAX, se vera de esta forma:

var saveme =  $.ajax({
                  type: "POST",
                  url: "hola.php", //nombre del archivo php que consultaremos.
                  dataType: "json",
                  data: dataString, //Los datos enviados para la consulta
                  success: function(data) {
                    $.each(data, function(i, item) {
                    lista = document.getElementById("myTable");
                    var tr = document.createElement("tr");
                    var columna1 = document.createElement("th")
                    columna1.innerHTML = item.dato1;
                    var columna2 = document.createElement("th")
                    columna2.innerHTML = item.dato1;
                    var columna3 = document.createElement("th")
                    columna3.innerHTML = item.dato3;
                    var columna4 = document.createElement("th")
                    columna4.innerHTML = item.dato4;
                    lista.appendChild(tr);
                    tr.appendChild(columna1);
                    tr.appendChild(columna2);
                    tr.appendChild(columna3);
                    tr.appendChild(columna4);
                   });
                  }
                });

Utilizamos un $.each para recorrer la respuesta del AJAX y utilizamos los datos traídos mediante el elemento "item", mediante la variable lista indicamos que esta contendrá el elemento con id myTable, luego crearemos el elemento tr, el elemento tr contendrá los elementos th, los cuales creamos mediante las variables columna1, columna2 etc... y con columna1.innerHTML = item.dato1; indicamos que valor o dato contendrá dicha columna utilizando el traído de la consulta con item.dato1 o el nombre que tenga el dato, finalmente agregamos los elementos creados con appendChild, agregando primero el tr a la variable lista y luego las columnas a la variable tr para que queden dentro de este.

Espero les sea de utilidad, saludos.

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.