title: jQuery user editable table cell
body: <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>