Need Assistance - jQuery / Datatables / JEditable - Record Details being Editable

I'm a bit new to all of these libraries so please bear with me - let me try to explain:

I have Datatables working fine, I'm employing the hide/show technique for record details, and I'm applying jEditable but I'm running into a snag when I try to get the record details to be 'editable'. Main record info becomes editable upon click with no problem.

I thought with just adding the same class name to the inner table td elements would do it - nope. Anyone have any insight on what I may be doing wrong or need to do?

--HTML file containing the table --

<table cellpadding="0" cellspacing="0" border="0" class="stdtable stdtablecb" id="dyntable2">
 <thead>
         <tr>
                 <th class="head0" width="3%"></th>
 <th class="head0" width="10%">Name</th>
                        <th class="head0" width="10%">Role</th>
 <th class="head0" width="20%">Email</th>
 <th class="head0" width="15%">Username(s)</th>
 <th class="head0" width="15%">Post</th>
 <th class="head0" width="10%">Action</th>
 </tr>
 </thead>
        <tbody>
        <tr>
                 <td colspan="6">.... loading data ....</td>
 </tr>
 </tbody>
        <tfoot>
         <tr>
                 <th class="head0"></th>
 <th class="head0">Name</th>
                 <th class="head0">Role</th>
 <th class="head0">Email</th>
 <th class="head0">Username(s)</th>
 <th class="head0">Post</th>
 <th class="head0">Action</th>
 </tr>
 </tfoot>
</table>

-- And the contents of the js file --

 var oTable, urlStatus = 'active';
  
 /* Function that formats for row details */
 function fnFormatDetails ( nTr ) 
 {     
 var aData = oTable.fnGetData( nTr );     
 var sOut = '<table width="100%" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';     
 sOut += '<tr class="hightlighted">';
 sOut += '<td width="15%" align="right"><b>Address:</b></td>';
 sOut += '<td width="35%" align="left" class="edit">'+aData[6]+'</td>';
 sOut += '<td width="15%" align="right"><b>Username:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[9]+'</td>';
 sOut += '</tr>';     
 sOut += '<tr class="hightlighted">';
 sOut += '<td align="right"><b>Phone Number:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[7]+'</td>';
 sOut += '<td align="right"><b>OpenNet Username:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[10]+'</td>';
 sOut += '</tr>';     
 sOut += '<tr class="hightlighted">';
 sOut += '<td align="right"><b>Cell Number:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[8]+'</td>';
 sOut += '<td align="right"><b>Inventory Last Signed:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[11]+'</td>';
 sOut += '</tr>';     
 sOut += '<tr class="hightlighted">';
 sOut += '<td align="right">&nbsp;</td>';
 sOut += '<td align="left" class="edit">&nbsp;</td>';
 sOut += '<td align="right"><b>Last Accessed:</b></td>';
 sOut += '<td align="left" class="edit">'+aData[12]+'</td>';
 sOut += '</tr>';     
 sOut += '</table>'; 
     return sOut; 
 } 
 /* setup URL status param switch for dataTables param */
 if (document.URL.indexOf('all') > 0){
 urlStatus = 'all';
 }
 else if (document.URL.indexOf('inactive') > 0){
 urlStatus = 'inactive';
 }
 else {
 urlStatus = 'active';
 }
 /* Prep jQuery and DataTables */
 $(document).ready(function(){
 oTable = $('#dyntable2').dataTable({
 "sAjaxSource": "../../com/users.cfc?method=getJsonUsers&status="+urlStatus,
   "sAjaxDataProp": "DATA",
 "sPaginationType": "full_numbers",
 
 /* Apply the jEditable handlers to the table */
 "fnDrawCallback": function () {
 $('.edit').editable( '../examples_support/editable_ajax.php', {
 "callback": function( sValue, y ) {
 /* Redraw the table from the new data on the server */
 oTable.fnDraw();
 },
 "height": "14px"
 } );
 },
 
 
 /* Here we define for all rows;
  * For column 1 (aTargets array 0) that it is going to have an image for hide/show
  * for  column 7 ( aTargets array 6) that it is going to display images for action
  */
 "aoColumnDefs":[
 {
 "sClass": "center", 
 "bSortable": false,
 "mRender": function(data,type,row) {
 return data
 +'<img title="Show additional User Information" src="../../images/datatables/details_open.png">';
 },
 "aTargets": [0]
 },
 { 
 "sClass": "center",
 "bSortable": false,
 "mRender": function(data,type,row){
 return data
 + '<img title="Edit User Information for: '
 + row[1]
 +'" src="../../images/edit.gif">&nbsp;&nbsp;<img title="Delete User Information for: '
 + row[1]
 +'" src="../../images/del.gif">';
 },
 "aTargets": [6]
 }
 ]
 
 /* Here we define individual column definitions */

  ,
 "aoColumns":[
 null,
 {"sClass": "edit"},
 {"sClass": "edit"},
 {"sClass": "edit"},
 {"sClass": "edit"},
 {"sClass": "edit"},
 null
 ]
    });


 /* Function to change between 'hide' and 'show' */    
 $('#dyntable2 tbody td img').live('click', function() {
 var nTr = $(this).parents('tr')[0];
 if (oTable.fnIsOpen(nTr))
 {
 /* If statement necessary to avoid applying open/close function to last 'action' column of images */
 if (this.src.indexOf("close") > 0) {
 /* This row is already open - close it */
 this.src = "../../images/datatables/details_open.png";
 this.title = "Show additional User Information";
 oTable.fnClose(nTr);
 }
 }
 else
 {
 /* If statement necessary to avoid applying open/close function to last 'action' column of images */
 if (this.src.indexOf("open") > 0) {
 /* Open this row */
 this.src = "../../images/datatables/details_close.png";
 this.title = "Hide additional User Information";
 oTable.fnOpen(nTr, fnFormatDetails(nTr), '');
 }
 
 }
 });
 });

As this is being developed in an offline development environment that I cannot make available, I can't link to a live demo.


Thanks in advance for any help on this as I can't seem to find anything on the net right now.