CODEWITHSUNDEEP
jqueryhtml
Art B
Art B

Reputation: 147

Editable table cell using Textarea Tag

I trying to make editable table using jQuery. See code below

HTML

<tr>
      <td>1</td>
      <td>11.11.2017</td>
      <td><span class="editable-cell">11-00</span></td>
      <td><span class="editable-cell">Проведение контрольных процедур</span></td>
      <td><span class="editable-cell">Выкзд МВК в рамках задачи 56987</span></td>
      <td><span class="editable-cell">17 км</span></td>
      <td>53,31</td>
    </tr>

When user click on table cell, textarea tag appears in this cell and let him edit text

jQuery

$('.editable-cell').mousedown(function(event){

        var oldValue = "";
        var newValue = "";

        oldValue = $(this).text();
        $(this).text("");
        $(this).append('<textarea id="edit-area" rows="5" cols="50">');
        $(this).append('</textarea>');
        $("#edit-area").val(oldValue);
        $("#edit-area").focus();

        return false;
      });

I'm stucked on this and need help. 1. When I click on cell, textarea appears and shows the text from span. If I try to set cursor by mouse in some place of text in Textarea, the cursor is always shown at the begining of the string. How I can place the cursor in any part of text in Textarea? 2. If I click on another span in my table or any place of window the old Textarea shoud be closed. How I can catch mouse click outside Textarea?

Upvotes: 1

Views: 822

Answers (1)

mr.freeze
mr.freeze

Reputation: 14060

The problem is that you're appending the textarea to your span instead of the table cell. You probably want this instead:

$('.editable-cell').mousedown(function(event){
        var span = $(this);
        var oldValue = span.text();
        var ta = $('<textarea class="edit-area" rows="5" cols="50"></textarea>');
        ta.text(oldValue);
        span.parent().append(ta);
        span.remove();        
        return false;
});

Notice that the append is on the parent of the span which is the table cell

Upvotes: 1

Related Questions