Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I would just put an input box there, and use css to remove all borders, background...etc.</p> <p>Then when you focus on the input box, add a css class to it to restore the input-like css styles, and remove them when you lose focus (onblur)</p> <p>Fiddle: <a href="http://jsfiddle.net/Pe47d/" rel="nofollow">http://jsfiddle.net/Pe47d/</a></p> <p>HTML</p> <pre><code>&lt;input type="text" id="test" value="something!" /&gt; </code></pre> <p>Javascript (jQuery)</p> <pre><code>$('#test').focus( function() { $(this).addClass('focus'); }).blur( function() { $(this).removeClass('focus'); // Do stuff here if you want... like submitting data to server or something }); </code></pre> <p>CSS</p> <pre><code>#test { border: none; padding: 0; margin: 0; background: none; } #test.focus { border: 1px solid #000; } </code></pre> <p><strong>UPDATE</strong> to your requirements..</p> <p>Fiddle: <a href="http://jsfiddle.net/S99My/" rel="nofollow">http://jsfiddle.net/S99My/</a></p> <p>HTML</p> <pre><code>&lt;table id="table"&gt; &lt;tr&gt;&lt;td&gt;&lt;span class="text"&gt;Something&lt;/span&gt;&lt;input type="text" class="hidden" name="somename" value="Something" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;span class="text"&gt;Something&lt;/span&gt;&lt;input type="text" class="hidden" name="somename" value="Something" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;span class="text"&gt;Something&lt;/span&gt;&lt;input type="text" class="hidden" name="somename" value="Something" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;span class="text"&gt;Something&lt;/span&gt;&lt;input type="text" class="hidden" name="somename" value="Something" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Javascript</p> <pre><code>jQuery( function($) { $('.text').click( function() { $(this).hide(); $(this).siblings('input').show().focus(); }); $('#table input').blur( function() { // Save stuff here.... $(this).hide(); $(this).siblings('.text').show(); }); }); </code></pre> <p>CSS</p> <pre><code>.hidden { display: none; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload