Reputation: 5137
I have looked into several editable table plugins but I am not sure they is really necessary for my needs. All I want to do is catch a click on a td element, grab the current value, then change the td html to an input + button and when the button is pressed, remove the input and button and place the new text in the td. Here is what I have and it isn't working at all. when you click on a td, the whole table disappears and is replaced with an input.
Here is the JS:
var selectedObj;
$('td').click(function(e){
// Handle the click
if ($('#currentInput').length == 0)
{
selectedObj = $(this);
var currentValue = $(this).text();
var newValue = currentValue;
$(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");
}
});
function setNewValue()
{
var newValue = $('#currentInput').val();
selectedObj.html('');
selectedObj.text(newValue);
}
And the HTML:
<p>
<table id='transitTable' border="0" cellspacing="2" cellpadding="2" class='display' width="400">
<tr id='1'>
<td class="etsHeader etsLeft">H1</td>
<td class="etsHeader etsLeft">H2</td>
<td class="etsHeader etsLeft">H3</td>
<td class="etsHeader etsLeft">H4</td></tr>
<tr id='2'>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td></tr>
<tr id='3'>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td></tr></table></p>
Upvotes: 3
Views: 12761
Reputation: 4368
Why don't you try contentEditable = true,
Check it here
Upvotes: 8
Reputation: 9967
This happens because you are replacing the td
with an input
tag which is invalid in that context.
offending code
$(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");
Try to .append()
to a td
or wrap the td
values in another tag.
Upvotes: 2