jquery中的可编辑表格单元格

时间:2016-09-22 08:58:35

标签: javascript jquery html css

$('#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应该只关注第一次点击。

1 个答案:

答案 0 :(得分:1)

为什么要在return语句后放置代码?

我认为你应该把它改成

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