Add css class to dynatable columns

Question

I'm trying to add a class name to dynatable generated <td>s, but I don't know how. I've tried this, but does not work:

<table id="my-final-table">
  <thead>
    <th>Band</th>
    <th>Song</th>
      <th style="display:none;" class="td-id">id</th>
  </thead>
  <tbody>
  </tbody>
</table>

I want to add td-id to the last <td>.

var jsondata=[
  {
    "band": "Weezer",
    "song": "El Scorcho",
      "id":1
  },
  {
    "band": "Chevelle",
    "song": "Family System",
      "id":2
  }
];

var processingComplete = function(){
    $('#my-final-table tr').on("click",function(){
        console.log($(this));
});
};
$('#my-final-table').dynatable({
  dataset: {
    records: jsondata
  }
}).bind('dynatable:afterProcess', processingComplete);

processingComplete();

But the row html is like this when I click on a row:

<td style="text-align: center;">Chevelle</td>
<td style="text-align: center;">Family System</td>
<td style="display: none;text-align: start;">2</td>

JSFiddle: http://jsfiddle.net/maysamsh/pDVvx/5/

Answer 1

You could do something like this -

$('tr').each(function(){
    $(this).find('td').eq(1).addClass('yellow');
})

http://jsfiddle.net/jayblanchard/pDVvx/6/

Answer 2

In the scriptfile for dynatable (jquery.dynatable.js) you can change a part of the script showed below:

function defaultCellWriter(column, record) {
    var html = column.attributeWriter(record),
        td = '<td';
    if (column.hidden || column.textAlign) {
      td += ' style="';
      // keep cells for hidden column headers hidden
      if (column.hidden) {
        td += 'display: none;';
      }
==> comment the followed lines
      // keep cells aligned as their column headers are aligned
      //if (column.textAlign) {
      //  td += 'text-align: ' + column.textAlign + ';';
      //}
      td += '"';
    }
==> now the text will not be aligned when the table is generated!
    return td + '>' + html + '</td>';
  };