JSON to HTMLTable

Inject table into dom

by phsiao2000

HTML

<div id = 'tableGoesHere'></div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
            table {
                font-family: Helvetica, Arial, sans-serif;
            }

            table tr {
                font-weight: normal;
            }

            table .amountCol {
                text-align : right;
                font-family: monospace;
                font-weight: bold;
            }

            table .amountHeader {
                text-align: right;
            }

            table .quantityCol {
                text-align : center;
            }

            table .quantityHeader {
                text-align: center;
            }

            body {
                width  : 800px;
                margin : auto;
            }

            #tableGoesHere input[name] {
                width: 30px;
            }
#myTable .quantityHeader {
    width: 50px;
}

JavaScript

var json = '[{"index":"1","merchOID":"3550472","itemID":"550","url":"","descr":"ISO 22000 All-in-One Package on CD","amount":"997.00","quantity":"1"},{"index":"2","merchOID":"4387758","itemID":"AL2FPPM","url":"","descr":"Introduction to SQF Level 2","amount":"149.00","quantity":"1"},{"index":"3","merchOID":"3978018","itemID":"551-SQ7","url":"","descr":"SQF Edition 7 All-in-One Package on CD","amount":"997.00","quantity":"1"},{"index":"4","merchOID":"4387805","itemID":"EL2PM","url":"","descr":"SQF Level 2Internal Auditing for Packaging Manufacturers","amount":"549.00","quantity":"1"},{"index":"5","merchOID":"4387804","itemID":"EL2FP","url":"","descr":"SQF Level 2 Internal Auditing for Food Processors","amount":"1098.00","quantity":"2"}]';
var myCart = JSON.decode(json);

var myTable = new HtmlTable({
    properties: {
        border: 1,
        cellspacing: 3,
        class:'table table-striped table-bordered table-condensed'
    },
    headers: [
        {content:'OItem', properties: {class:'merchOItemHeader'}},
        {content:'Item', properties: {class:'itemHeader'}},
        {content:'Quantity', properties: {class:'quantityHeader'}},
        {content:'Description', properties: {class:'descrHeader'}},
        {content:'Amount', properties: {class:'amountHeader'}},
             ],
});
        
var myInputs = [];
myCart.each(function(item, index){

    var thisRow = myTable.push([
                  {content: myCart[index].merchOID, properties: {class: 'merchOItemCol'}}, 
                  {content: myCart[index].itemID, properties: {class: 'itemCol'}}, 
                  {content: myCart[index].quantity, properties: {class: 'quantityCol'}}, 
                  {content: myCart[index].descr, properties: {class: 'descrCol'}}, 
                  {content: myCart[index].amount, properties: {class: 'amountCol'}}
                            ]);
    myInputs.push(thisRow.tds[2]);
});
//console.log("myInputs: " +...