Este team de expertos despúes de varios días de trabajo y recopilar de información, hemos dado con la solución, nuestro deseo es que te resulte útil en tu trabajo.
Ejemplo: mostrar datos json en una tabla html usando javascript dinámicamente
<!DOCTYPE html><html><head><title>ConvertJSONData to HTMLTable</title><style>
th, td, p, input
font:14px Verdana;
table, th, td
border: solid 1px #DDD;
border-collapse: collapse;
padding:2px 3px;
text-align: center;
th
font-weight:bold;</style></head><body><input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON"/><p id="showData"></p></body><script>functionCreateTableFromJSON()var myBooks =["Book ID":"1","Book Name":"Computer Architecture","Category":"Computers","Price":"125.60","Book ID":"2","Book Name":"Asp.Net 4 Blue Book","Category":"Programming","Price":"56.00","Book ID":"3","Book Name":"Popular Science","Category":"Science","Price":"210.40"]// EXTRACT VALUE FOR HTML HEADER. // ('Book ID', 'Book Name', 'Category' and 'Price')var col =[];for(var i =0; i < myBooks.length; i++)for(var key in myBooks[i])if(col.indexOf(key)===-1)
col.push(key);// CREATE DYNAMIC TABLE.var table =document.createElement("table");// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.var tr = table.insertRow(-1);// TABLE ROW.for(var i =0; i < col.length; i++)var th =document.createElement("th");// TABLE HEADER.
th.innerHTML= col[i];
tr.appendChild(th);// ADD JSON DATA TO THE TABLE AS ROWS.for(var i =0; i < myBooks.length; i++)
tr = table.insertRow(-1);for(var j =0; j < col.length; j++)var tabCell = tr.insertCell(-1);
tabCell.innerHTML= myBooks[i][col[j]];// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.var divContainer =document.getElementById("showData");
divContainer.innerHTML="";
divContainer.appendChild(table);</script></html>Ten en cuenta dar recomendación a este escrito si lograste el éxito.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)