Change cell contents to input box

Question

I know this has been asked a couple of times but this requirement is a bit different. Here is my HTML:

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

I am filling up this table using javascript

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

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

}

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.

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

But this doesn't work.

Possible duplicate of [How to make HTML table cell editable?](http://stackoverflow.com/questions/6012823/how-to-make-html-table-cell-editable) — Michał Perłakowski, Apr 13 '16 at 07:13
Well no its not duplicate because I have bounded the class=asset_value to span instead of td element. but yes I have never tried contenteditable which seems great. Let me try this. Thanks for the tip! Can we use this attribute with any element? for eg:td and span? — codec, Apr 13 '16 at 07:15
@Gothdo Thanks this is working but a small problem is when I click out the text gets updated properly but I want to append a few glyphicons on click out. How can I do that? — codec, Apr 13 '16 at 08:09
Ok I am very close now. `$('#reportTable').on('click', 'span', function() { var $e = $(this); $e.attr('contentEditable', true); $e.on('blur', function() { console.log("in here"); });` The only problem is I have to double click to go into edit mode because of which the console.log statement print statement is executed twice. Any idea how to get over this? — codec, Apr 13 '16 at 09:44

HGrover · Answer 1 · 2016-04-13T08:48:50.173

here check this out plunker link Plunker

In this example see the comments as "Notes" and try editing and focusing out of it. The span text would be updated`

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

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


 $(document).ready(function() {
   var rowData= getTableRow({id:123,create_date:12-06-1988,created_by:"Edit_User",comments:"notes_1"});
   var row = $("<tr>").html(rowData);
   $('#reportTable tbody').append(row);

  $('#reportTable').on('click', 'span', function() {
    var $e = $(this);
    if($e.attr('class') === 'asset_value') {
        var val = $(this).html();
        var input = $("<input>").val(val);
        $e.parent().empty().append(input);
        input.focus();
    }
    input.on('blur', function() {
        $(this).parent().html("<span class='asset_value'>"+ $(this).val()+"</span>");
      });
   });
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <table class="display table table-striped" id="reportTable">
      <thead>
        <tr>
          <th width="2%">
            <input id="all" name="select_all" value="1" type="checkbox" />
          </th>
          <th>Date</th>
          <th>User</th>
          <th>
            <span>Comments</span>
          </th>
          <th width="4%">Action</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </body>

</html>

This works for the first time. But when I click on the notes again I get "Uncaught TypeError: Cannot read property 'on' of undefined" — codec, Apr 13 '16 at 08:05
Ok I am very close now. `$('#reportTable').on('click', 'span', function() { var $e = $(this); $e.attr('contentEditable', true); $e.on('blur', function() { console.log("in here"); });` The only problem is I have to double click to go into edit mode because of which the console.log statement print statement is executed twice. Any idea how to get over this? — codec, Apr 13 '16 at 09:46
Just have the line of code //$e.attr('contentEditable', true); commented and add the attribute in the place where you are creating the span — HGrover, Apr 13 '16 at 10:48
Well first time I get "in here" once. Then when I click on the span again I get "in here" twice and 3rd time I get it thrice 4th time I get 4 times. Somehow its keeping a track of clicks. But yes now I don't have to click twice to go into edit mode. This is strange! — codec, Apr 13 '16 at 11:35
#lovesoftlayeraj @lovesoftlayeraj Can you provide the working demo — HGrover, Apr 13 '16 at 12:16

Change cell contents to input box

1 Answers1