如何使用 Jquery 内联编辑 HTML 表格单元格

我想通过单击它来编辑表格单元格。我试过了，但它没有正确更新。

当我尝试更新第一行最后一列中的第一个单元格时，它会更新。但是，如果我尝试在中间更新整个列值会发生变化。但对我来说，只有一个单元格值应该改变。

在这里摆弄

.JS：

$(document).ready(function() {
  $('.editable').click(function(e) {
    var i = 0;
    var id = $(this).attr('id');
    e.stopPropagation(); //<-------stop the bubbling of the event here
    var value = $('#' + id).html();
    console.log(id + i);
    updateVal('#' + id, value);
  });
  function updateVal(currentEle, value) {
    console.log("Current Element is" + currentEle);
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="0" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event) {
      if (event.keyCode == 13) {
        $(currentEle).html($(".thVal").val().trim());
        //$(currentEle).html($(".thVal").val().trim());
      }
    });
    $(document).click(function() { // you can use $('html')
      $(currentEle).html($(".thVal").val().trim());
    });
  }
});

<body>
  <tbody id="itemtab" style="width:100%;height:200px !important;font-size:12px">
    <table border="1">
      <th>field1</th>
      <th>field2</th>
      <th>field3</th>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my1" class="editable">10</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my2" class="editable">20</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my3" class="editable">30</td>
      </tr>
    </table>
  </tbody>
</body>

问题是并不总是到达$(document).click处理程序，因为有时通过e.stopPropagation();从事件$('.editable').click来防止事件冒泡。

优化和修复代码：

$('.editable').click(function (e) {
    e.stopPropagation();
    var value = $(this).html();
    updateVal(this, value);
});
function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="' + value + '" />');
    $(".thVal", currentEle).focus().keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    }).click(function(e) {
        e.stopPropagation();
    });
    $(document).click(function() {
        $(".thVal").replaceWith(function() {
            return this.value;
        });
    });
}

演示：http://jsfiddle.net/8acoz3fv/4/

因此，

如果您将嵌套事件处理程序从处理document上的click更改为处理.thVal上的focusout，它似乎可以正常工作。例如，代替：

$(document).click(function() {
    $(currentEle).html($(".thVal").val().trim());
});

做

$(".thVal").focusout(function () {
    $(currentEle).html($(".thVal").val().trim());
});

JSFiddle here

演示：http://jsfiddle.net/8acoz3fv/4/

相关内容

最新更新

热门标签：