$(document).ready(function () { var custs = getCustomerData(); for (var i = 0; i < custs.length; i++) { var cust = custs[i]; $('<div class="cust"><span /></div>') .find('span') //get to span .attr('title', cust.City) .data(cust) .html(cust.Name) .click(showCust) .end() //get back to span's parent div .appendTo('#divContainer'); } }); function showCust() { var spanCust = $(this).data(); //Iterate through object literal properties and write out values for (var key in spanCust) { var $node = $('#' + key); if ($node.length > 0) { $node.html(spanCust[key]); } } } function getCustomerData() { return [ { ID: 1, Name: 'John', City: 'Scottsdale', State: 'AZ' }, { ID: 2, Name: 'Jane', City: 'Chandler', State: 'AZ' }, { ID: 3, Name: 'Michelle', City: 'San Diego', State: 'CA' }, { ID: 4, Name: 'James', City: 'Portland', State: 'OR' }, { ID: 5, Name: 'Tom', City: 'Dallas', State: 'TX' }, ]; }
Click a name to see details: <br /> <div id="divContainer"></div> <br /> <div id="divCustDetails"> Name: <span id="Name"></span> <br /> City: <span id="City"></span> <br /> State: <span id="State"></span> </div>
.cust { width:200px;cursor:pointer;} .cust:nth-child(even) { background-color:#efefef;} .cost:nth-child(odd) { background-color:#fff;}