I have a table and i want to update the values of the table cell on click . I want to show an input field containing current value . Current value is showing but when i click on input filed to edit then suddenly the input field become empty .
$('td#11').click(function(event){
var valuee = $('td#11').text();
$('td#11').html("<form method='post'><input style='color:black;' value=" +valuee+ "></form>");
});
An alternative other solutions:
$('td#11').click(function(event){
if($('td#11').find('form, input').length == 0) {
var valuee = $('td#11').text();
$('td#11').html("<form method='post'><input id='txt11' style='color:black;' value=" +valuee+ "></form>");
}
});
You can add another snippet with above snippet to remove text-box on losing focus to it as below:
$(document).on('blur', 'input#txt11', function() {
$('td#11').html($('input#txt11').val());
});
Working demo jsFiddle
The problem is that your click event fires again and again and so on.
To avoíd this, use event.target.tagName And check if it does not match "INPUT"
$('td#11').click(function(event) {
if (event.target.tagName != "INPUT") {
var valuee = $('td#11').text();
$('td#11').html("<form method='post'><input style='color:black;' value=" + valuee + "></form>");
}
});
Working Demo below
$('td#11').click(function(event) {
if (event.target.tagName != "INPUT") {
var valuee = $('td#11').text();
$('td#11').html("<form method='post'><input style='color:black;' value=" + valuee + "></form>");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="11">text</td>
</tr>
</table>