Toggle text to input

Suggested answer to http://stackoverflow.com/questions/10862476/how-to-change-text-into-text-input-element-jquery/10868137#10868137

by Michel Plungjan

HTML

<script src="http://code.jquery.com/jquery-migrate-1.0.0rc1.js"></script>
<b>NOTE: toggle-event I am using suddenly became deprecated and removed in jQuery 1.9</b>

<table id="tbl">
  <tr>
    <td class="field" id="field1s">field1x</td>
    <td class="field" id="field2s">field2x</td>
    <td class="field" id="field3s">field3x</td>
    <td class="field" id="field4s">field4x</td>
    <td class="xx">#</td>
  </tr>
</table>













<script>

/* by: thinkingstiff.com license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28096782-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
var headerUri = 'http://stackoverflow.com/a/10868137/295783',
    headerCaption = '<div style="padding-top:5px">jQuery: How to change text into text input element</div>';
document.body.insertAdjacentHTML(
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: grey;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'border: 1px solid black;'
        +...

CSS

input { width:50px }

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
    width:80%;
}
table td
{
    padding: 8px 8px;
}
.xx { border-left:1px solid black; text-align:center}

JavaScript

$('#tbl .xx').toggle(
  function() {
    // since I gave the fields a class, the following could be coded
    // $(".field").each... but the OP had different class names      
    $(this).siblings().each(function(){
      var t = $(this).text();
      $(this).html($('<input />',{'value' : t}));
    });
  },
  function() {
    $(this).siblings().each(function(){
      var inp = $(this).find('input');
      if (inp.length){
        $(this).text(inp.val());
      }
    });
  }    
);