<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="row"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr class="active"> <th>CODE</th> <th>DESC</th> </tr> </thead> <tbody> <tr> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <td class="editable">1234</td> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <td class="editable">Description</td> </div> </tr> </tbody> </table> </div> </div> </div>

$(document).ready(function() { $(document).on('click', '.editable', function(e) { var caller = $(this); var currentVal = $(this).text(); var width = $(this).width(); console.log($(caller).offset()); console.log($(caller).position()); var $sizeDiv = $('<div/>', { class: 'col-xs-12 col-sm-12 col-md-12 col-lg-12' }); var $input = $('<input/>', { class: 'form-control', type: 'text', value: currentVal, css: { position: 'absolute', top: $(caller).position().top + 5, left: $(caller).position().left + 5, 'z-index': 10000, width: $(caller).width() } }); //$(caller).html(''); $(caller).append($input); }); });