Change cell contents to input box
<p>I know this has been asked a couple of times but this requirement is a bit different. Here is my HTML:</p>

<pre><code> &lt;table class="display table table-striped" id="reportTable"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th width="2%"&gt;&lt;input id="all" name="select_all" value="1" type="checkbox"&gt;&lt;/th&gt;
                    &lt;th&gt;Date&lt;/th&gt;
                    &lt;th&gt;User&lt;/th&gt;
                    &lt;th&gt;&lt;span&gt;Comments&lt;/span&gt;&lt;/th&gt;
                    &lt;th width="4%"&gt;Action&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;td&gt;
                &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt;
                &lt;span&gt; &lt;/span&gt;
                Loading...
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
</code></pre>

<p>I am filling up this table using javascript</p>

<pre><code>function getTableRow(report) {
    var id = report.id;
    var date = report.create_date;
    var user = report.created_by;
    var comments = report.comments;

return [
    "&lt;input name='' value='1' type='checkbox'&gt;",
    "&lt;a href=\"/reports/" + id + "\"&gt;" + date + "&lt;/a&gt;",
    user,
    &lt;span id=\"" + id + "\"" + "class=\"asset_value\"&gt;" + comments + "&lt;/span&gt;,
    '&lt;button class="button" onClick="deleteReport(this, \'' + id + '\')"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/button&gt;'
];
</code></pre>

<p>}</p>

<p>What I want is when I click on the the 3rd column(comments) of any row I should get an input box and when I click out it should get replaced by the content I have typed in the input box.</p>

<pre><code> $(document).ready(function() {
$('#reportTable').on('click', 'span', function() {
    var $e = $(this);
    if($e.attr('class') === 'asset_value') {
        var val = $(this).html();
        $e.html('&lt;input type="text" value="'+val+'" /&gt;');
        var $newE = $e.find('input');
        $newE.focus();
    }
    $newE.on('blur', function() {
        $(this).parent().html('&lt;span&gt;'+$(this).val()+'&lt;/span&gt;');
      });
   });
});​
</code></pre>

<p>But this doesn't work.</p>