Using the tab button with jeditable.

Using the tab button with jeditable.

DemoniWaariDemoniWaari Posts: 1Questions: 0Answers: 0
edited July 2012 in General
Hello there! So I have this small table here and I want to make it so that I can use the tab button to scroll through my table. Apparently I can't do this. The problem seems to be that I can't bind my keydown function to the TD element, only to the table element, and thus my "this" handler just gives the table's information and not the cell's.
Here's some of my code.

The actual table.
[code]

eTable = $("#table").dataTable({
"bJQueryUI": true,
"sAjaxSource": "/table_get",

"sAjaxDataProp": "",
"aaSorting": [[2, 'asc']],
"fnDrawCallback": function () {

$('#table tbody td:not(.noteditable)').editable(function(value, settings) {
aPos = eTable.fnGetPosition(this);
aData = eTable.fnGetData(aPos[0]);
if (aPos[1]==1){

if (value == ''){
value = '&nbsp'
}
aData["firstname"] = capitalize(value); // Just some capitalizing here.
}

if (aPos[1]==2){
if (value == ''){
value = '&nbsp'
}
aData["lastname"] = capitalize(value);
}

return(capitalize(value));
},
{
tooltip: "Edit me",

data: function(value, settings) {
return value.replace(' ', '');
}
});
},
"aoColumnDefs": [
{"sClass": "noteditable", "aTargets": [0,3]}
],
"aoColumns": [
{ "mDataProp": "id", "bVisible": true, "bSortable": false},
{ "mDataProp": "firstname"},
{ "mDataProp": "lastname"},
{ "mDataProp": null,
"sDefaultContent": 'Submit Delete' }
]
});
[/code]

Here's where I try to get the keydown function to work.

[code]

$('#table tbody td').keydown(function(keypress){
if (keypress.which == 9) {
$(this).find('input').blur();
var nexBox = ' ';
if ($('#table tbody td').index(location) == ($('#table tbody td').length-1)) {
nextBox = $('#table:first');
}
else {
nextBox = $(this).eq($('#table tbody td').index(this)+1);
}

return false;
};
[/code]

The problem is that I can't get the "this" handler to give me anything useful information and thus I can't make the tab button to jump to the next cell.
If I put $('#table tbody td').keydown... it doesn't do ANYTHING, I can't get the tab-key work that way. Only if I put #table there the tab button goes through, but then I can't get anything out from "this" handler (it just gives the whole table element)!

So here's my little dilemma, anyone care to give some insight?

Replies

This discussion has been closed.