title: Edit a specified cell in a table - jsp
body: <p>I need some help with javascript/jquery or ajax. 
  A am writing a java web app and have question regarding table. 
  I need to have the possibility to edit one (and only one specified cell). In this case I have the "status" field. When clicking on the value I'd like to have a dropdown list with 2 possibilities to choice: "active" and "passive". </p>
  
  <p>I tried to figure it out, but without success. 
  Here is my code: </p>
  
  <pre><code>    &lt;body&gt;
      &lt;table border = "1"&gt;
          &lt;tr&gt;
              &lt;td&gt;name&lt;/td&gt;
              &lt;td&gt;surname&lt;/td&gt;
              &lt;td&gt;status&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; Adam&lt;/td&gt;
              &lt;td&gt;Smith&lt;/td&gt;
              &lt;td id = "status" onclick = "update(this.id)"&gt;active&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;script type = "text/javascript"&gt;
  function update(id){
  var content = document.getElementById(id).firstChild.nodeValue;
  document.getElementById(id).innerHTML = "&lt;input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/&gt;";
    }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In this case when I click on the cell the value changes to "null" and it is not editable anymore. </p>