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 --

2. <table cellpadding="0" cellspacing="0" border="0" class="stdtable stdtablecb" id="dyntable2">
3. <thead>
4.         <tr>
5.                 <th class="head0" width="3%"></th>
6. <th class="head0" width="10%">Name</th>
7.                         <th class="head0" width="10%">Role</th>
8. <th class="head0" width="20%">Email</th>
9. <th class="head0" width="15%">Username(s)</th>
10. <th class="head0" width="15%">Post</th>
11. <th class="head0" width="10%">Action</th>
12. </tr>
13. </thead>
14.         <tbody>
15.         <tr>
16.                 <td colspan="6">.... loading data ....</td>
17. </tr>
18. </tbody>
19.         <tfoot>
20.         <tr>
21.                 <th class="head0"></th>
22. <th class="head0">Name</th>
23.                <th class="head0">Role</th>
24. <th class="head0">Email</th>
25. <th class="head0">Username(s)</th>
26. <th class="head0">Post</th>
27. <th class="head0">Action</th>
28. </tr>
29. </tfoot>
30. </table>

-- And the contents of the js file --

2. var oTable, urlStatus = 'active';
3.  
4. /* Function that formats for row details */
5. function fnFormatDetails ( nTr ) 
6. {     
7. var aData = oTable.fnGetData( nTr );     
8. var sOut = '<table width="100%" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';     
9. sOut += '<tr class="hightlighted,edit">';
10. sOut += '<td width="15%" align="right"><b>Address:</b></td>';
11. sOut += '<td width="35%" align="left" class="edit">'+aData[6]+'</td>';
12. sOut += '<td width="15%" align="right"><b>Username:</b></td>';
13. sOut += '<td align="left" class="edit">'+aData[9]+'</td>';
14. sOut += '</tr>';     
15. sOut += '<tr class="hightlighted,edit">';
16. sOut += '<td align="right"><b>Phone Number:</b></td>';
17. sOut += '<td align="left" class="edit">'+aData[7]+'</td>';
18. sOut += '<td align="right"><b>OpenNet Username:</b></td>';
19. sOut += '<td align="left" class="edit">'+aData[10]+'</td>';
20. sOut += '</tr>';     
21. sOut += '<tr class="hightlighted">';
22. sOut += '<td align="right"><b>Cell Number:</b></td>';
23. sOut += '<td align="left" class="edit">'+aData[8]+'</td>';
24. sOut += '<td align="right"><b>Inventory Last Signed:</b></td>';
25. sOut += '<td align="left" class="edit">'+aData[11]+'</td>';
26. sOut += '</tr>';     
27. sOut += '<tr class="hightlighted">';
28. sOut += '<td align="right">&nbsp;</td>';
29. sOut += '<td align="left" class="edit">&nbsp;</td>';
30. sOut += '<td align="right"><b>Last Accessed:</b></td>';
31. sOut += '<td align="left" class="edit">'+aData[12]+'</td>';
32. sOut += '</tr>';     
33. sOut += '</table>'; 
34.    return sOut; 
35. } 
36. /* setup URL status param switch for dataTables param */
37. if (document.URL.indexOf('all') > 0){
38. urlStatus = 'all';
39. }
40. else if (document.URL.indexOf('inactive') > 0){
41. urlStatus = 'inactive';
42. }
43. else {
44. urlStatus = 'active';
45. }
46. /* Prep jQuery and DataTables */
47. $(document).ready(function(){
48. oTable = $('#dyntable2').dataTable({
49. "sAjaxSource": "../../com/users.cfc?method=getJsonUsers&status="+urlStatus,
50. "sAjaxDataProp": "DATA",
51. "sPaginationType": "full_numbers",
53. /* Apply the jEditable handlers to the table */
54. "fnDrawCallback": function () {
55. $('.edit').editable( '../examples_support/editable_ajax.php', {
56. "callback": function( sValue, y ) {
57. /* Redraw the table from the new data on the server */
58. oTable.fnDraw();
59. },
60. "height": "14px"
61. } );
62. },
65. /* Here we define for all rows;
66. * For column 1 (aTargets array 0) that it is going to have an image for hide/show
67. * for  column 7 ( aTargets array 6) that it is going to display images for action
68. */
69. "aoColumnDefs":[
70. {
71. "sClass": "center", 
72. "bSortable": false,
73. "mRender": function(data,type,row) {
74. return data
75. +'<img title="Show additional User Information" src="../../images/datatables/details_open.png">';
76. },
77. "aTargets": [0]
78. },
79. {
80. "sClass": "center",
81. "bSortable": false,
82. "mRender": function(data,type,row){
83. return data
84. + '<img title="Edit User Information for: '
85. + row[1]
86. +'" src="../../images/edit.gif">&nbsp;&nbsp;<img title="Delete User Information for: '
87. + row[1]
88. +'" src="../../images/del.gif">';
89. },
90. "aTargets": [6]
91. }
92. ]
94. /* Here we define individual column definitions (1st column we are defining the hide/show information) */
95. 
    
96.   ,
97. "aoColumns":[
98. null,
99. {"sClass": "edit"},
100. {"sClass": "edit"},
101. {"sClass": "edit"},
102. {"sClass": "edit"},
103. {"sClass": "edit"},
104. null
105. ]
106.   });
107. 
     
108. 
     
109. /* Function to change between 'hide' and 'show' */  
110. $('#dyntable2 tbody td img').live('click', function() {
111. var nTr = $(this).parents('tr')[0];
112. if (oTable.fnIsOpen(nTr))
113. {
114. /* If statement necessary to avoid applying open/close function to last 'action' column of images */
115. if (this.src.indexOf("close") > 0) {
116. /* This row is already open - close it */
117. this.src = "../../images/datatables/details_open.png";
118. this.title = "Show additional User Information";
119. oTable.fnClose(nTr);
120. }
121. }
122. else
123. {
124. /* If statement necessary to avoid applying open/close function to last 'action' column of images */
125. if (this.src.indexOf("open") > 0) {
126. /* Open this row */
127. this.src = "../../images/datatables/details_close.png";
128. this.title = "Hide additional User Information";
129. oTable.fnOpen(nTr, fnFormatDetails(nTr), '');
130. }
132. }
133. });
134. });

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