Fill a html table from Javascript dynamically

Question

Fill a html table from Javascript dynamically

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have this div in my HTML:

Changes made:

and I'm going through a Javascript object, and I want to add some rows with the content of the Object, which is dynamic, the code I have is the following:

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+" "';  
         });
};

javascript jquery html

asked by Silvia 28.04.2018 в 12:59

source

2 answers

0

Here is an example using a dynamically generated table.

Using a matrix to complete the values of 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>

answered by 28.04.2018 в 17:23

Replace characters of a string in python using Lists How to read a JSON response from AJAX?

score 1 · Accepted Answer

I really do not know how you are bringing the data or how your table is structured, but in general terms, if you bring the file with a AJAX call, it would be something like that (it also applies to local calls) :

$(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>