javascript - Remove input element from cell and preserve the value, when clicked outside of cell or another cell -

i want input elements in cells disappear when click outside of cells or on cell (note clicked cell must active afterwards, have input element). , cell must keep value of input element.

when cell clicked, input element must appear (that part solved).

html:

<table>     <tr>         <td>content</td>         <td>content</td>     </tr>     <tr>         <td>content</td>         <td>content</td>     </tr> </table> 

javascript:

//this part creates input in td element, allows editing cell content ,  //when enter pressed removes input leaving cell value (the okay part)     $("td").click(function(){         if($(this).find("input").length==0){             var cellcontent = $(this).html();             $(this).empty();             $(this).append("<input type='text' size='"+cellcontent.length+"' value='"+cellcontent+"'>");             $(this).find("input").focus();         }         var currentcell = $(this);            $("input").keyup(function(event){             if(event.which == 13){//on enter pressed                 $(this).remove();                 $(currentcell).html($(this).val());             }         });     }); 

now problem:

//here every cell 1 clicked should behave cell in // "enter" pressed in previous part of code  //i trying smth here (amateur) got confused $("*").click(function(){    for(var i=0;i<$("td input").length;i++){      if($(this).has("input")){         var cellvalue = $("td input:eq("+ +")").val();         var address = $("td input:eq("+ 0 +")").parent();         $("td input:eq("+ +")").remove();         $(address).html(cellvalue);      }       } }); 

here sample, how it: jsfiddle

hope helps.

html:

<table>     <tr>         <td>content <input type="text" class="hidden"></td>         <td>content <input type="text" class="hidden"></td>     </tr>     <tr>         <td>content <input type="text" class="hidden"></td>         <td>content <input type="text" class="hidden"></td>     </tr> </table> 

css:

.visible {     display: block; }  .hidden {     display: none; } 

js:

var tds = $('td');  tds.click(function(){      var allinputs = tds.find('input');     var clickedinpit = $(this).find('input');      if (allinputs.hasclass('visible')) {          allinputs.removeclass('visible');         allinputs.addclass('hidden');     }      clickedinpit.addclass('visible');     clickedinpit.removeclass('hidden'); });