Editing HTML table row data

Question

Hello Folks..,

I am getting error while updating text field values. When I update one text field, the remaining are all updated automatically with same value.

Here is the link contains my source code:

http://jsfiddle.net/jFycy/284/

My requirement is to update that particular field only.

$(function () {
    $(".inner, .inner2").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        updateVal(currentEle, value);
    });
});

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

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

Use `contenteditable` attribute, http://jsfiddle.net/pranavcbalan/kk71zsqa/ — Pranav C Balan, Jun 30 '16 at 06:51
already tried this earlier in data table. but, didn't get updated value in alert. — ROOT, Jun 30 '16 at 06:56

Pranav C Balan · Accepted Answer · 2016-06-30T07:09:22.940

You can do something like this

$(function() {
  $(".inner, .inner2").dblclick(function(e) {
    // check text input element contains inside
    if (!$('.thVal', this).length)
    // if not then update with the input element
      $(this).html(function(i, v) {
      return '<input class="thVal" type="text" value="' + v + '" />'
    });
  }).on({
    // bind keyup event 
    'keyup': function(event) {
      // on enter key update the content
      if (event.keyCode == 13) {
        $(this).parent().html($(this).val().trim());
      }
    },
    'blur': function() {
      // if focus out the element update the content with iput value
      $(this).parent().html($(this).val().trim());
    }
  }, '.thVal');
});

.inner {
  background: red;
}
.inner2 {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner">1</div>
<div class="inner2">1</div>
<div class="inner">1</div>

Or much more simpler method with a contenteditable attribute.

.inner {
  background: red;
}
.inner2 {
  background: grey;
}

<div contenteditable class="inner">1</div>
<div contenteditable class="inner2">1</div>
<div contenteditable class="inner">1</div>

Hello @pranav, getting HTML elements when i click on the text fields. Here is he link, please check this once. http://jsfiddle.net/jFycy/290/ — ROOT, Jun 30 '16 at 10:29
@ Pranav C Balan, http://stackoverflow.com/questions/38197041/image-not-loaded-in-google-chrome . Once look at this. — ROOT, Jul 05 '16 at 07:01

score 1 · Answer 2 · answered Jun 30 '16 at 07:20

Thing is, you using myltiple inputs and attaching event to every one of it.

Instead, I suggest you to create one input and use exactly this particular input.

function updateVal(currentEle, value) {
    var $thval = $('<input class="thVal" type="text" value="' + value + '" />');
  $(currentEle).empty().append($thval);
  $thval.focus().keyup(function(event) {
    if (event.keyCode == 13) {
      $(this).blur();
    }
  }).blur(function(){
        $(currentEle).html($(".thVal").val().trim());
      $thval.remove();
  });
}

http://jsfiddle.net/jFycy/290/

score 0 · Answer 3 · answered Oct 05 '16 at 10:50

When multiple html element like (OL li) it duplicate value in other controls too. For this I have made this changes, and its working.

    $(".updatefield").dblclick(function (e) {
        **var len = $('.thVal').length;
        if (len > 0) {
            $(".thval").remove();
            return;**
        }
        e.stopPropagation();      //<-------stop the bubbling of the event here
        var currentEle = $(this);
        var value = $(this).html();
        updateVal(currentEle, value);
    });



    function updateVal(currentEle, value) {

        var wid = currentEle.width() + 30;
        var hei = currentEle.height()+ 10;

        //$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
        $(currentEle).html('<textarea class="thVal">' + value + '</textarea>');
        $(".thVal").css("width", wid);
        $(".thVal").css("height", hei);
        $(".thVal").css("background", "lightyellow");
        $(".thVal").focus();


        $(".thVal").keyup(function (event) {
            if (event.keyCode == 13) {

                if ($(".thVal").val() == "")
                    $(".thVal").val("EMPTY");
                $(currentEle).html($(".thVal").val().trim());
            }
        });

        $(document).click(function () { // you can use $('html')
            **var e = jQuery.Event("keyup");
            e.which = 13; // Enter
            e.keyCode = 13; // Enter
            $('.thVal').trigger(e);**
        });

Editing HTML table row data

3 Answers3