$(document).ready(function() { $("#container .column").dblclick(function() { var content = $(this).text(); var width = $(this).width() - 1; var height = $(this).height() - 4; var $editbox = $("<input type='text'" + "style='width:" + width + ";" + "height:" + height + ";" + "border:none" + "' value='" + content + "' />"); $(this).empty(); $(this).prepend($editbox); $editbox.focus(); $editbox.select(); $($editbox).bind("blur", function() { content = $(this).val(); var parent = $(this).parent(); parent.html(content); }); }); });
<div id="container"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> <div class="column">7</div> <div class="column">8</div> <div class="column">9</div> <div class="column">10</div> </div>
#container { } #container .column { width: 200px; border:1px solid #ccc; margin-bottom: 10px; } #container input { border: none; margin: 0; padding: 0; }