q/31217335/1636522

by wared

HTML

<div>
    Total value: RM <input id="total" type="text" value="0.00" size="5" disabled /> | 
    <button id="add">Add</button>
    <button id="load">Load</button>
    <button id="export">Export</button>
</div>
<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
            <th>&nbsp</th>
        </tr>
     </thead>
     <tbody>
	 </tbody>
</table>

CSS

* {
    font: normal 12px Arial;
}

table, select {
    width: 100%;
}

th, td, div {
    padding: 4px;
}

div {
    padding-top: 8px;
    padding-bottom: 8px;
}

th {
    border-bottom: 1px solid #999;
}

th, td {
    border-collapse: collapse;
    border-right: 1px solid #999;
    white-space: nowrap;
}

th:last-child, td:last-child {
    border-right: none;
}

JavaScript

var categories,
    ShoppingItem,
    shoppingList = [],
    view = {}, 
    ctrl = {};

// table record

ShoppingItem = function (config) {
    var k;
    this.category = 0;
    this.product = 0;
    this.quantity = 1;
    this.price = 0;
    for (k in config) {
        this[k] = config[k];
    }
};

ShoppingItem.prototype.getTotal = function () {
    return this.price * this.quantity;
};

each.call(ShoppingItem.prototype, [
    'category',
    'product',
    'quantity',
    'price'
], function (attr) {
    var Attr = attr.charAt(0).toUpperCase() + attr.slice(1);
    this['get' + Attr] = new Function('return this.' + attr + ';');
    this['set' + Attr] = new Function('v', 'this.' + attr + ' = v;');
});

// data source

categories = [{
    name: 'fruit and vegetables',
    products: [
        { name: 'Apple Pink Lady 8\'s Pack C16', price: 9.50 },
        { name: 'Avocado /Pc', price: 5.50 },
        { name: 'Banana Mas/Beran/Rast Ripe /Kg', price: 4.00 },
        { name: 'Baby Cucumber /Kg', price: 6.50 },
        { name: 'Baby Spinach (Bayam) /Kg', price: 9.90 },
        { name: 'Bitter Gourd (Peria) /Kg', price: 7.00 },
    ]
}, {
    name: 'fish and meats',
    products: [
        { name: 'Catfish (Keli)', price: 8.88 },
        { name: 'Lala (L)', price: 10.00 },
        { name: 'Chicken Drumstick (kg)', price: 15.90 },
        { name: 'Beef Cubes', price: 35.90 },
        { name: 'Knuckle Beef', price: 37.90 },
        { name: 'Lamb Leg (Sliced)', price: 24.64 }
    ]
}, {
    name: 'food and beverages',
    products: [
        { name: 'Butter Loaves Cake (300g)', price: 8.80 },
        { name: 'Gardenia Bonanza Big Saver 660g', price: 3.35 },
        { name: 'Adabi Sardines 155g', price: 2.50 },
        { name: 'Ayam Brand Baked Beans In Cheese 425g', price: 3.71 },
        { name: 'Nescafe Latte Can 240ml', price: 2.42 },
        { name: 'A&W 500ml', price: 2.33 }
    ]
}, {
    name: 'toiletries',
    products: [
        { name: 'Adidas Roll On Fresh...