Using the Data Function

by mrrodd

HTML

<table id="CustsTable" style="width:300px">
  <thead>
      <tr>
          <th>First Name</th>
          <th>Last Name</th>
      </tr>
  </thead>
  <tbody id="tbody" />
</table>

JavaScript

$(document).ready(function() {
    var custs = [
        {FirstName: 'John', LastName:'Papa', Age: 45},
        {FirstName: 'Dan', LastName:'Wahlin', Age: 42},
        {FirstName: 'Scott', LastName:'Guthrie', Age: 36}
    ];
    var $tbody = $('#tbody');
    for (var i=0; i < custs.length; i++) {
        var cust = custs[i];
        var tr = $('<tr><td>' + cust.FirstName + '</td><td>' + 
                   cust.LastName + '</td></tr>');
        tr.data('customer', cust);
        $tbody.append(tr);        
    }
    
    wireEvents();
});

function wireEvents() {
    $('#CustsTable').on('click','tr',function() {
        var cust = $(this).data('customer');
        alert(cust.Age);
    });
}