CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kumar
kumar

Reputation: 207

editable table cell in jquery

$('#example tbody').on('click', 'td.actualweight', function(e) {

    if (!$('.thVal1', this).length)

        $(this).html(function(i, v) {
        return '<input class="thVal1" type="text" value="' + v + '" />'
        $(".thVal1").focus();

    });
}).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() {
        actualweight = $(".thVal1").val();
        // if focus out the element update the content with iput value
        $(this).parent().html($(this).val().trim());
    }
}, '.thVal1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

When I click on td TextBox gets displayed. If I click again text gets focus. However, TextBox should get focus on the first click only.

Upvotes: 3

Views: 85

Answers (1)

Littlee
Littlee

Reputation: 4327

Why do you put code after a return statement?

I think you should change it to

$(this).html(function(i, v) {
  return '<input class="thVal1" type="text" value="' + v + '" />'
  //$('.thVal1').focus();
});
$('.thVal1').focus();

Upvotes: 1

Related Questions