jQuery user editable table cell
<p>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.</p>

<p>Here is the JS:</p>

<pre><code>    var selectedObj;

  $('td').click(function(e){
      // Handle the click

     if ($('#currentInput').length == 0)
     {
          selectedObj = $(this);
        var currentValue = $(this).text();
        var newValue = currentValue;

        $(this).html("&lt;input id='currentInput' type='text' value='"+currentValue+"'/&gt; &lt;button onclick='setNewValue()'&gt;Set&lt;/button&gt;");
     }

  });
  function setNewValue()
  {
            var newValue = $('#currentInput').val();

        selectedObj.html('');
            selectedObj.text(newValue);
  }
</code></pre>

<p>And the HTML:</p>

<pre><code>&lt;p&gt; 
&lt;table id='transitTable' border="0" cellspacing="2" cellpadding="2" class='display' width="400"&gt;
&lt;tr id='1'&gt;
&lt;td class="etsHeader etsLeft"&gt;H1&lt;/td&gt;
&lt;td class="etsHeader etsLeft"&gt;H2&lt;/td&gt;
&lt;td class="etsHeader etsLeft"&gt;H3&lt;/td&gt;
&lt;td class="etsHeader etsLeft"&gt;H4&lt;/td&gt;&lt;/tr&gt;
&lt;tr id='2'&gt;
&lt;td class="etsValue etsOdd etsLeft"&gt;R1&lt;/td&gt;
&lt;td class="etsValue etsOdd etsLeft"&gt;R1&lt;/td&gt;
&lt;td class="etsValue etsOdd etsLeft"&gt;R1&lt;/td&gt;
&lt;td class="etsValue etsOdd etsLeft"&gt;R1&lt;/td&gt;&lt;/tr&gt;
&lt;tr id='3'&gt;
&lt;td class="etsValue etsEven etsLeft"&gt;R2&lt;/td&gt;
&lt;td class="etsValue etsEven etsLeft"&gt;R2&lt;/td&gt;
&lt;td class="etsValue etsEven etsLeft"&gt;R2&lt;/td&gt;
&lt;td class="etsValue etsEven etsLeft"&gt;R2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/p&gt;
</code></pre>
