How to Edit HTML table cell in inline using Jquery

Question

How to Edit HTML table cell in inline using Jquery

16k Views Asked by Kathirvel Appusamy At 20 October 2024 at 21:44

I would like to edit table cell by click on it. I tried but its not updating properly.

When I am trying to update first cell in the first row last column its getting updated. But if i try to update in the middle entire column value getting changed.But for me only one cell value should get changed.

Fiddle Here

JS:

$(document).ready(function() {
  $('.editable').click(function(e) {
    var i = 0;
    var id = $(this).attr('id');
    e.stopPropagation(); //<-------stop the bubbling of the event here
    var value = $('#' + id).html();

    console.log(id + i);

    updateVal('#' + id, value);

  });

  function updateVal(currentEle, value) {
    console.log("Current Element is" + currentEle);
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="0" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event) {
      if (event.keyCode == 13) {
        $(currentEle).html($(".thVal").val().trim());
        //$(currentEle).html($(".thVal").val().trim());


      }

    });

    $(document).click(function() { // you can use $('html')
      $(currentEle).html($(".thVal").val().trim());
    });
  }
});

<body>
  <tbody id="itemtab" style="width:100%;height:200px !important;font-size:12px">
    <table border="1">
      <th>field1</th>
      <th>field2</th>
      <th>field3</th>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my1" class="editable">10</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my2" class="editable">20</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my3" class="editable">30</td>
      </tr>
    </table>
  </tbody>
</body>

Original Q&A

There are 2 best solutions below

dfsq On 08 December 2014 at 20:56

The problem is that $(document).click handler is not always reached because sometimes event bubbling is prevented with e.stopPropagation(); from $('.editable').click event.

Optimized and fixed code:

$('.editable').click(function (e) {
    e.stopPropagation();
    var value = $(this).html();
    updateVal(this, value);
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="' + value + '" />');
    $(".thVal", currentEle).focus().keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    }).click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $(".thVal").replaceWith(function() {
            return this.value;
        });
    });
}

Demo: http://jsfiddle.net/8acoz3fv/4/

**bowheart** · Accepted Answer

So it seems to work just fine if you change the nested event handler from handling a click on document to handling a focusout on .thVal. e.g. Instead of:

$(document).click(function() {
    $(currentEle).html($(".thVal").val().trim());
});

Do

$(".thVal").focusout(function () {
    $(currentEle).html($(".thVal").val().trim());
});

JSFiddle here

How to Edit HTML table cell in inline using Jquery

There are 2 best solutions below

Demo: http://jsfiddle.net/8acoz3fv/4/

Related Questions in JQUERY

Related Questions in HTML

Related Questions in INLINE-EDITING

Trending Questions

Popular # Hahtags

Popular Questions