Attach events to your HTML

This example is about iteration and how to change the value of attributes.
The previous examples were only changing node values.
For each entry we get from the JSON we want a new link in the list.

The HTML:

<table class="players 2">
  <thead>
    <tr>
      <th class="player">Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="context">
      <td class="player context">Chloe</td>
    </tr>
  </tbody>
</table>

The JSON data:

var data = ["Adrian Meador","Bryan Thomas", ... ,"Wendy Leatherbury"];

The Javascript to do this action (here with jQuery):

var directive = {
  'tbody tr td[onclick]':
    function(context,items, pos){ 
      return 'lineClick(\''+items[pos]+'\');'
    },
  'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
  'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
  'tbody tr td[style]':"'cursor:pointer'",
  'tbody tr[class]': 
    function(context, items, pos){
      var oddEven =  (pos % 2 == 0) ? 'even' : 'odd';
      var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
      return oddEven + ' ' + firstLast; 
    }
}
$('table.players.2').autoRender(data, directive);