Using the each() function with an Object Literal

by Dan Wahlin

HTML

<div> 
    <button id="addRowButton">Add Row</button>    
        <div>
    <table cellspacing="0" cellpadding="4" id="GridView1" style="color:#333333;border-collapse:collapse;">
        <tr style="color:White;background-color:#1C5E55;font-weight:bold;">
            <th scope="col">Id</th><th scope="col">Last</th><th scope="col">Change</th>
        </tr><tr style="background-color:#E3EAEB;">
            <td>118</td><td>2791.19</td><td>2.00</td>
        </tr><tr style="background-color:White;">
            <td>119</td><td>12393.90</td><td>-6.13</td>
        </tr><tr style="background-color:#E3EAEB;">
            <td>120</td><td>1332.63</td><td>-0.24</td>
        </tr>
    </table>
</div>
    </div>

JavaScript

var customers = [
            {
                firstName: 'John',
                lastName: 'Doe',
                address: {
                    city: 'Chandler',
                    state: 'AZ'
                }
            },
            {
                firstName: 'yasaman',
                lastName: 'Doe',
                address: {
                    city: 'Chandler',
                    state: 'AZ'
                }
            },
            {
                firstName: 'Johnny',
                lastName: 'Doe',
                address: {
                    city: 'Phoenix',
                    state: 'AZ'
                }
            }
        ];

        $(document).ready(function () {
            $('#addRowButton').click(function() {
                $('#GridView1').append('<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>');
            });
            
            $('#GridView1 tr:gt(0)').each(function (i) {
                var customer = customers[i];
                var $tr = $(this);
                //$('td', $tr)
                $tr.find('td').each(function (tdI) {
                    var $td = $(this);
                    if (tdI == 0) {
                        $td.html(customer.firstName);
                    }
                    if (tdI == 1) {
                        $td.html(customer.lastName);
                    }
                    if (tdI == 2) {
                        $td.html(customer.address.city);
                    }

                });
            });
        });