title: Html table editable
body: <p>I have a very simple table structure</p>
  
  <pre><code>&lt;table width='50%' id='tabs'&gt;
  &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and here is my simple script to make table editable this is working fine but i found that it is slow and code is not efficient.I would like to improve this code.By the way i am working with jquery 1.3.2</p>
  
  <pre><code>var z={};
  function tdClicks(){
  var x="",y="";
  $("table tr td").click(function(){
      z=$(this);
      x = $(this).text() || $(this).find("input[type='text']").val();
      if(!x){
          x="";
      }
      $(this).html("&lt;input type='text' size='5' value='"+ x+"' /&gt;");
      $(this).unbind("click");
      $(this).find("input[type='text']").bind("blur", function(){
          catchme($(this).val());
          tdClicks();
      });
  });
  }
  
  function catchme(wht){
      $(z).text(wht);
  }
  
  tdClicks();
  </code></pre>
  
  <p>Please see <a href="http://jsfiddle.net/v7znh/6/" rel="nofollow noreferrer">JS FIDDLE HERE</a></p>