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

【问题标题】：How to Edit HTML table cell in inline using Jquery如何使用 Jquery 在内联编辑 HTML 表格单元格
【发布时间】：2014-12-08 20:29:45
【问题描述】：

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

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

Fiddle Here

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>

【问题讨论】：

标签： jquery html inline-editing

【解决方案1】：

问题在于 $(document).click 处理程序并不总是到达，因为有时使用来自 $('.editable').click 事件的 e.stopPropagation(); 会阻止事件冒泡。

优化和固定的代码：

$('.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/

【讨论】：

【解决方案2】：

因此，如果您将嵌套事件处理程序从处理document 上的click 更改为处理.thVal 上的focusout，它似乎工作得很好。例如而不是：

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

做

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

JSFiddle here

【讨论】：