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