javascript - 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>

当我单击td时，将显示TextBox。如果我再次单击，文本将成为焦点。但是，TextBox应该只专注于第一次单击。

最佳答案

为什么将代码放在return语句之后？

我认为您应该将其更改为

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