Inline Editing - Using Icons

ashleighdobbs

Hi,
I am using datatables inline editing and all is working ok. But then I have changed the Edit and Delete columns to icons to replace the text 'Edit' and 'Delete'.

I have modified the script and the delete function if working correctly, and edit is although when I attempt to save the row nothing happens.
Below is the modified script.

[code]

$(document).ready(function() {
var oTable = $('#example').dataTable();
var nEditing = null;

$('#new').click( function (e) {
e.preventDefault();

var aiNew = oTable.fnAddData( [ '', '', '', '','','','',
'',
'' ] );
var nRow = oTable.fnGetNodes( aiNew[0] );
editRow( oTable, nRow );
nEditing = nRow;
} );

$('#example a.delete').live('click', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );


} );

$('#example a.edit').live('click', function (e) {
e.preventDefault();

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

if ( nEditing !== null && nEditing != nRow ) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */

restoreRow( oTable, nEditing );
editRow( oTable, nRow );
nEditing = nRow;
}
else if ( nEditing == nRow && this.innerHTML ==
'' ) {

/* Editing this row and want to save it */
saveRow( oTable, nEditing );
nEditing = null;
}
else {
/* No edit in progress - let's start one */
editRow( oTable, nRow );
nEditing = nRow;
}
} );
} );

[/code]

I beleive the problem is in this bit of code
[code] else if ( nEditing == nRow && this.innerHTML ==
'' ) {
[/code]

Any ideas?

Thanks