I have seen many examples on the internet regarding looping through a JSON object and printing it in a html table. However my issue is a bit different as I need the first column to be an image the next few columns are json data from the json array and then finally a input field in the last column (the value from this input field is provided from the json array as well).

Here is the full JSON I have where tabledata contains the array of information I need to create the html table with:

1.     {"approverName":"","emailAddress":"","companyName":"ABC","address":{"streetAddress1":"12 BlahBlah","streetAddress2":"","state":"ON","zipCode":"","country":"SO","phoneNumber":""},"tabledata":[{"vendorPart":"AAAAA","partDescription":"N/A","price":"0.00","quantity":"28"},{"vendorPart":"BBBBBBB","partDescription":"N/A","price":"0.00","quantity":"3"},{"vendorPart":"CCCCCC","partDescription":"N/A","price":"0.00","quantity":"25"}]}

This is my Jquery's ajax success function which hit's the webservice and get's the data (just so you know how the JSON object is being used/created):

1.     success: function(data, status, jqxhr) {
2.                         var xml = $($.parseXML(data)), // Parse the XML String to a Document, and Wrap jQuery
3.      json = xml.find("string").text(), // Get the text of the XML
4.      jsonObj = $.parseJSON(json); // Parse the JSON String
5.      $('#approver').val(jsonObj.approverName);
6.      $('#emailaddress').val(jsonObj.emailAddress);
7.      $('#address1').val(jsonObj.address.streetAddress1);
8.      $('#address2').val(jsonObj.address.streetAddress2);
9.      $('#postalcode').val(jsonObj.address.zipCode);
10.      $('#city').val(jsonObj.address.state);
11.      $('#country').val(jsonObj.address.country);
12.      $('#phone').val(jsonObj.address.phoneNumber);
13.     
14.                      },

After the input fields are assigned I need to set up the form to look like this (hard-coded at the moment)

Based on this image you see how the first column is an image, the second - fourth columns are data from jsonObj and the fourth is an input field I must create with the value also coming from jsonObj.

Here is the code for the input:

1.     <input class="quantityClass" type="number" name="quantity" min="0" />

I also would like to know, I did a lot of CSS on this table if I render the table with jquery does the CSS still take effect at the right time? I hope that js/css run at the same time.