I have written my code such that when user double clicks on a <td>
element I am:
- appending am
<input>
oftype="text"
- adding a value to it and update it if the user clicks on enter
Here is the my problem:
If user double clicks on <td>
and clicks on another <td>
without pressing enter, I need the initial <td>
's <input>
to be reset to previous value.
// Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
function updateVal(currentEle, value)
{
$(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
$(".thVal").focus();
$(".thVal").keyup(function(event){
if(event.keyCode == 13){
$(currentEle).html($(".thVal").val().trim());
}
});
$('body').not(".thVal").click(function(){
if(('.thVal').length != 0)
{
$(currentEle).html($(".thVal").val().trim());
}
});
}
Please help me. I don't want to use jeditable datatable.