AR Transactions

by beej

HTML

<table id="the_table">
    <tr class="template">
        <td class='icon'></td>
        <td class='date'></td>
        <td class='name'></td>
        <td class='amount'></td>
        <td class='open'></td>
    </tr>
</table>

CSS

tr .template {
    display: none;
}

tr .body {
    background-color: #ccc;
}

table {
    border: 1px solid black;
}

JavaScript

var data = {
    head: ['12/13/2010', 'Payment', '[Total Amount]', 0],
    body: [['12/13/2010', 'Payment [202-101]', 1118.01, 0.00],
        ['12/13/2010', 'Payment [202-101]', 2995.41, 0.00],
        ['12/13/2010', 'Payment [207-24]', 2617.31, 0.00],
        ['12/13/2010', 'Payment [207-24]', 1136.00, 0.00],
        ['12/13/2010', 'Payment [207-24]', 3422.20, 0.00],
        ['12/13/2010', 'Payment [207-24]', 1450.55, 0.00],
        ['12/13/2010', 'Payment [207-24]', 2687.86, 0.00],
        ['12/13/2010', 'Payment [207-24]', 3565.67, 0.00],
        ['12/13/2010', 'Payment [207-24]', 8608.62, 0.00],
        ['12/13/2010', 'Payment [207-24]', 5631.39, 0.00],
        ['12/13/2010', 'Payment [207-24]', 2127.97, 0.00],
        ['12/13/2010', 'Payment [207-24]', 660.62, 0.00]]
};

$("#the_table > tr .template")
    .clone()
    .removeClass('template')
    .find("td .date").text(data.head[0])
    .find("td .name").text(data.head[1])
    .find("td .amount").text(data.head[2])
    .find("td .open").text(data.head[3])
    .appendTo("table tr");