如何将 HTML 表格单元格变成可编辑的文本框答案

【问题标题】：How to make a HTML table cell into a editable text box如何将 HTML 表格单元格变成可编辑的文本框
【发布时间】：2017-03-15 12:10:19
【问题描述】：

基本上，我希望用户点击表格并编辑文本。

这是我关注的 Js Fiddle：

http://jsfiddle.net/ddd3nick/ExA3j/22/

您可以在下面看到我整理的代码。我遵循了一个 JS fiddle 并考虑在我的页面中使用它。

当我双击单元格时没有任何反应，我不确定为什么不工作。

请帮忙找出丢失的东西！

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
<script type="text/javascript">

    $(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();
        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();
        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });
    $(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
    });
        $(this).find('input').dblclick(function(e){
            e.stopPropagation(); 
        });
    });
});

</script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<table class="editableTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Shahid</td>
                <td>shahid@ssiddique.info</td>
                <td>012-234-2432</td>
            </tr>
        </tbody>
    </table>

<a href='http://ssiddique.info'> ssiddique </a>

</body>
</html>

【问题讨论】：

当我双击表格中的单元格时，它并没有变成文本框来获取输入。 jsfiddle.net/ddd3nick/ExA3j/22（链接到 JS 小提琴）
你用的是什么浏览器？小提琴在 FF 42 中工作
可能想看看contentEditable
在 Chrome 中运行良好
@artm 我在 Google Chrome 中尝试了小提琴。它可以工作，但是当我在本地服务器上尝试代码时没有任何反应。

标签： javascript jquery html html-table

【解决方案1】：

首先包含 jQuery 库
不如放你的脚本
您可能想看看 contenteditable 元素

看起来很像这样：

$(function() {

  var $td = $("td");

  $td.on({
    "keypress" : function(e) {
      if (e.which !== 13) { // On Return key - "save" cell
        e.preventDefault();
        $(this).prop("contenteditable", false);
      }
    },
    "dblclick" : function() {
      $td.not(this).prop("contenteditable", false);
      $(this).prop("contenteditable", true);
    }
  });

});

td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<p><b>Double-click</b> on a table cell to edit</p>r

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000</td>
      <td>Roko</td>
      <td>roko@example.com</td>
      <td>021-321-4321</td>
    </tr>
    <tr>
      <td>001</td>
      <td>Shahid</td>
      <td>shahid@example.com</td>
      <td>012-123-1234</td>
    </tr>
  </tbody>
</table>

【讨论】：

天哪！非常感谢！你救了我的命...我一定会检查 contenteditable Elements
@user2128912 不客气。添加了一个使用contenteditable 的示例。一种更简单的方法。