编辑 HTML 表格行数据

Question

大家好..，

更新文本字段值时出现错误。当我更新一个文本字段时，其余的都会自动更新为相同的值。

这是包含我的源代码的链接：

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

我的要求是仅更新该特定字段。

$(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());
    });
}

Answer 1

你可以这样做

$(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>

---

或者使用contenteditable 属性的更简单的方法。

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

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

Answer 2

问题是，您使用多个输入并将事件附加到每个输入。

相反，我建议您创建一个输入并完全使用这个特定的输入。

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/

Answer 3

当像 (OL li) 这样的多个 html 元素时，它也会在其他控件中重复值。为此，我进行了更改，并使其正常工作。

    $(".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);**
        });