Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Creating HTMLtable dynamically from json array

    CODE : [var array_cells = [
    { "name" : "abc" , "sirname" : "x y z" , },
    { "name" : "def" , "sirname" : "x" , },
    { "name" : "ghj" , "sirname" : "y" , },
    ];
    ]

    This is my json array in a file named "json.js" and i want to create a html table dynamically through javascript which is written in a file named "file.js" which take data from array of file "json.js" and there is another file named "table.html" in which i have just sourced both files i.e."json.js" & "file.js".

    values of sirname like "x y z" from file "json.js" has their own attributes also so i want to make my html table like that when i click on "x y z" in the html table their attributes get opened in some other window. "x y z " must be hyperlinked to thier attributes.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Well, one way:
    Code:
    <html>
    <head>
    <style type="text/css">
    .datatable td {
        font-size: x-large;
    }
    .name {
        color: red;
    }
    .surname {
        font-style: italic;
    }
    </style>
    </head>
    <body>
    stuff here
    <div id="content"></div>
    and stuff here
    
    <script type="text/javascript">
    var array_cells = [
    { "name" : "abc" , "surname" : "x y z"  },
    { "name" : "def" , "surname" : "x"  },
    { "name" : "ghj" , "surname" : "y"  }
    ]; 
    
    var tbl = document.createElement("table");
    tbl.className = "datatable";
    tbl.border = "1";
    tbl.cellPadding = "10";
    
    var tbody = document.createElement("tbody");
    for ( var r = 0; r < array_cells.length; ++r )
    {
        var row = document.createElement("tr");
        var arrayRow = array_cells[r];
        var Name = arrayRow["name"];
    
        var td = document.createElement("td");
        td.className = "name";
        td.appendChild( document.createTextNode(Name) );
        row.appendChild(td);
        
        td = document.createElement("td");
        var link = document.createElement("a");
        link.className = "surname";
        var Surname = arrayRow["surname"];
        link.href = "showSurnameInfo.html?surname=" + encodeURIComponent(Surname);
        link.appendChild( document.createTextNode( Surname ) );
        td.appendChild( link );
        row.appendChild(td);
    
        tbody.appendChild(row);
        
    }
    tbl.appendChild(tbody);
    document.getElementById("content").appendChild(tbl);
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •