Code

JSON JQuery Dynamic Table Generation


(function($) {
    var json = {
            1: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            2: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            3: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            4: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            5: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            6: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            7: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            8: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            9: { description:"Description", code:"1234", code1:"1234", code2:"1224"},
            10: { description:"Description", code:"1234", code1:"1234", code2:"1224"}
    };

  var tableHeader =
      "</pre>
" + "" + " " + " " + " " + " " + " " + " "; var tableFooter = "
<table>
<tbody>
<tr>
<th>Actions</th>
<th>Description</th>
<th>Code</th>
<th>Code1</th>
<th>Code2</th>
</tr>
</tbody>
</table>
<pre>
";
  console.log(tableHeader);

  $("#des").append(tableHeader);

  $.each(json, function(key, value) {
    var cssName = "d";
    var cssKey = key % 2 == 0 ? 1 : 0;
        cssKey = cssName + cssKey;
    var html =
    "
" +    "<a>Modify</a>
" +      "" + this.description + "
" +      "" + this.code + "
" +      "" + this.code1 + "
" +      "" + this.code2 + "
" +      "
";
    console.log(html);
    $("#des tbody").append(html);
  });

  $("#des tbody").append(tableFooter);
  console.log(tableFooter);
})(jQuery);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s